Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • April 7, 2023 at 11:20 am #1403812
    Crimson-Guard

    Hi
    While developing template files for custom post type, I want to use Enfold shortcodes to display fixed content parts of the page (like an accordion FAQ at page bottom for example).

    My process is:
    1. prepare a reusable element with ALB using standard admin interface
    2. copy shortcode structure in ALB Debug box (please note that Shortcode Parser confirms structure is OK)
    3. use the shortcode in template php file with do_shortcode() function.

    Doing this almost work in that the shortcode content displays nicely BUT I can see the layout breaks after the shortcode output.
    The problem is the shortcode content loads OUTSIDE the #main.template-page.av-content-full wrapper,
    and elements that are after the shortcode output, like the footer, are loaded INSIDE the shortcode ouput wrapper element.
    Quite hard to explain so I share access to the staging site in the private content part below.

    The layout breaks MIGHT be mitigated through CSS magic, but this might prove time-consuming and not very future-proof.
    Can you provide a better approach for using shortcodes in template files?
    Thank you

    April 8, 2023 at 11:42 pm #1403922
    Mike

    Hey Julien,
    Thanks for the link to your site, have you tried placing your shortcode differently in your temple file, it sounds like the shortcode is outside the main container, or perhaps there is an unclosed div. Unfortunately your theme editor is disabled so we can’t see your child theme files.
    Please note that I would not recommend using a footer.php or a header.php in your child theme, because every so often we change these files and it becomes the top issue after updates.
    For you adding fixed content like an accordion FAQ at the bottom of a single post, I recommend injecting the shortcode, for example to add an accordion before the footer of every single post, try adding this code to the end of your child theme functions.php file in Appearance ▸ Editor:

    function insert_before_footer(){
	if(is_single()) {
    echo do_shortcode("[av_toggle_container faq_markup='' initial='0' mode='accordion' sort='' styling='' colors='' font_color='' background_color='' border_color='' toggle_icon_color='' colors_current='' font_color_current='' toggle_icon_color_current='' background_current='' background_color_current='' background_gradient_current_direction='vertical' background_gradient_current_color1='#000000' background_gradient_current_color2='#ffffff' background_gradient_current_color3='' hover_colors='' hover_font_color='' hover_background_color='' hover_toggle_icon_color='' size-toggle='' av-desktop-font-size-toggle='' av-medium-font-size-toggle='' av-small-font-size-toggle='' av-mini-font-size-toggle='' size-content='' av-desktop-font-size-content='' av-medium-font-size-content='' av-small-font-size-content='' av-mini-font-size-content='' heading_tag='' heading_class='' alb_description='' id='' custom_class='' template_class='' element_template='' one_element_template='' av_uid='av-lg8glvl5' sc_version='1.0' admin_preview_bg=''][av_toggle title='Toggle 1' tags='' custom_id='' element_template='' one_element_template='' av_uid='av-lg8glhnz' sc_version='1.0']Toggle 1 content[/av_toggle][av_toggle title='Toggle 2' tags='' custom_id='' element_template='' one_element_template='' av_uid='av-lg8glpqw' sc_version='1.0']Toggle 2 content[/av_toggle][/av_toggle_container]");
  }
}
add_filter( "ava_before_footer", "insert_before_footer" );

    Enfold_Support_1705.jpeg
    Try adjusting this to suit your needs.
    Here is a link to our Hooks & Filters

    Best regards,
    Mike

    April 11, 2023 at 9:02 am #1404093
    Crimson-Guard

    Hello Mike
    Thank you for your reply.
    I am using a custom template file (based on page.php) for a custom post type.
    This template (single-residence.php) includes standard php logic and html elements, plus Enfold shortcodes via do_shortcode() function (actually, I use shortcodes to load template parts that includes the Enfold shortcodes, but that the same, and I already tried using shortcodes directly in my template file).
    I do not use hooks to inject shortcodes, I load them in the template file PHP.

    Maybe there is something I need to add to the template to make Enfold ALB elements work as expected?
    I have reenabled the theme editor, if you want to check out.
    Thanks

    April 11, 2023 at 9:18 am #1404094
    Crimson-Guard

    Making tests with simpler Enfold shortcodes structure, I found out that it’s the use of [av_section] that breaks the layout. If I do not use ALB sections, the layout does not break (though this is not a working solution).
    Is this known issue? Is there a way to fix this?

    April 12, 2023 at 3:33 am #1404175
    Ismael

    Hi,

    The theme implements a few logic for the color section based on certain conditions that may affect the layout of the page such as adding an extra closing div, which might be the reason why it is breaking the page. Instead of using the shortcode, you can just try and extract the actual rendered output of the color section and place it in your templates. This way, the theme doesn’t have to interfere with your template modifications.

    Best regards,
    Ismael

    April 12, 2023 at 11:58 am #1404211
    Crimson-Guard

    Ok thank you.
    I was able to get what I want by replacing [av_section] shortcodes by equivalent html in my php file.
    Best regards

    April 12, 2023 at 11:35 pm #1404281
    Mike

    Hi,
    Glad to hear that you have this sorted out, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

    Best regards,
    Mike

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘Using shortcodes in template files breaks layout’ is closed to new replies.