Site logo

[Resolved] Hide header and footer dynamically based on query parameters

Home Forums Support [Resolved] Hide header and footer dynamically based on query parameters

Home Forums Support Hide header and footer dynamically based on query parameters

Viewing 15 posts - 1 through 15 (of 18 total)
  • Author
    Posts
  • #1821166
    Gerard

    I would like to hide elements such as the header or the footer based on a query parameter.

    I have some hybrid landing pages, with this I mean that they are part of the main menu and I don’t hide the header and the footer on them. But sometimes I do need to hide them from these pages for marketing purposes, and I do not want to duplicate the page to have different versions of the same page, since this would affect my analytics.

    What I would like to do is to be able to add a query parameter that makes the page hide its header and footer when accessed with its URL containing this parameter.

    For example:

    https://mywebsite/my-page would be my page, and when accessed like this it would have header and footer. I could then use this page as part of my website, in order to show my services while users can still navigate through all the website.

    https://mywebsite/my-page?landing=true would be the same page, but when this query parameter is detected, the header and footer wouldn’t be rendered. I could then use this link for marketing purposes, such as Facebook Ads, to not leak conversions.

    How could I achieve this? Is there any code snippet that could help me to do this?

    #1821229
    Elvin
    Staff
    Customer Support

    Hi Gerard,

    You’ll need to create a Layout element to disable header and footer – https://docs.generatepress.com/article/layout-element-overview/#disable-element

    Keep its display rule location empty.

    You then filter where it applies using this filter. https://docs.generatepress.com/article/generate_layout_element_display/

    On the if condition, you’ll have to do isset($_GET[[])

    add_filter( 'generate_layout_element_display', function( $display, $element_id ) {
      if ( 5020 === $element_id && isset($_GET['landing']) == true ) {
         $display = true;
      }
    
      return $display;
    }, 10, 2 );

    Where 5020 is the layout element’s ID.
    Where 5020

    #1821329
    Gerard

    Thank you Elvin!

    I would like to ask if it would be possible to not have to create a layout Element and to also not require an ID, since this doesn’t make it scalable and I would like to add this functionality for all my clients.

    Is there another filter that I could use to enable/disable page elements?

    In each page configuration we have can disable specific elements for that page under Page > Layout > Disable Elements. Don’t we have a filter for these options that are set on each page?

    #1821349
    Gerard

    I would like to filter these options so that I can conditionally enable or disable each one.

    See which options I mean

    Here is an example of what I would like to do. Notice that the name I’ve used for this filter doesn’t currently exist.

    
    add_filter( 'generate_page_disable_elements', function( $elements ) {
    
      if ( isset($_GET['landing']) == true ) {
        foreach($elements as $element => $disable ) {
          $elements[$element] = true;
        }
      }
    
      return $elements;
    }, 10, 1 );
    

    This function attached to this filter would disable all the elements in the current page if the isset($_GET['landing']) == truecondition is met. Just as if you had checked all the checkboxes under Page > Layout > Disable Elements.

    In the filter, $elements would be the array containing all the possible elements:

    $elements[‘top_bar’]
    $elements[‘header’]
    $elements[‘mobile_header’]
    $elements[‘primary_navigation’]
    $elements[‘secondary_navigation’]
    $elements[‘featured_image’]
    $elements[‘content_title’]
    $elements[‘footer’]

    Each item in the array would contain the value set in the current page options, so they would contain “true” if the element has to be disabled in the page, or “false” if it has to be shown.

    Does this makes sense to you? Do we already have some filter for this or could we add it in the next update?

    #1822264
    Elvin
    Staff
    Customer Support

    I would like to ask if it would be possible to not have to create a layout Element and to also not require an ID, since this doesn’t make it scalable and I would like to add this functionality for all my clients.

    “all of my clients” can be a tricky part. I’m not sure if you use GeneratePress for all of your clients. I can only do writeups for GeneratePress as I can’t be sure what hooks other theme uses for their header and footer.

    But yeah, we can try un-hooking things directly instead of using Layout Elements.

    add_action( 'wp','tu_remove_header' );
    function tu_remove_header() {
    	if( is_page(123) && isset($_GET['landing']) == true ){
    		remove_action( 'generate_header', 'generate_construct_header');
    		remove_action( 'generate_footer', 'generate_construct_footer' );
    	}
    }
    #1822471
    Gerard

    Hi Elvin, by “all my clients” I meant those ones using GeneratePress Pro with the same website setup. I do actually have my custom child theme that I provide to all of them.

    The unhooking example you’ve provided is what I need, thanks.

    Is there a list with the construct actions of the remaining 6 elements that haven’t been included in your code snippet?

    Thanks,
    Gerard

    #1822785
    Gerard

    Elvin, although there is a generate_header hook, there is no generate_footer hook: https://docs.generatepress.com/collection/hooks/

    The header disappears now when using the parameter, but not the footer.

    This is my code:

    // Add the ability to hide elements when a "landing" query string is present.
    function dynamic_landing_pages ()
    {
        if ( isset( $_GET['landing'] ) && $_GET['landing'] == true )
        {
            remove_action( 'generate_header', 'generate_construct_header');
            remove_action( 'generate_footer', 'generate_construct_footer' );
        }
    }
    add_action( 'after_setup_theme','dynamic_landing_pages' );
    #1823178
    Leo
    Staff
    Customer Support

    There is actually a generate_footer hook as per here:
    https://github.com/tomusborne/generatepress/blob/b60b853630da6d9015722da903e53c8064148b0a/inc/structure/footer.php#L13

    What if you replace after_setup_theme with wp?

    #1823215
    Gerard

    Hi Leo,

    It seems that the documentation needs to be updated then.

    In any case, replacing after_setup_theme with wp made no change.

    In both cases the footer bar disappears, but not the footer widgets area.

    #1823461
    Leo
    Staff
    Customer Support
    #1823644
    Gerard

    Hi Leo,

    I’ve updated my code to the following:

    // Add the ability to hide elements when a "landing" query string with true value is present.
    function dynamic_landing_pages ()
    {
        if ( isset( $_GET['landing'] ) && $_GET['landing'] == true )
        {
            remove_action( 'generate_header', 'generate_construct_header' );
            remove_action( 'generate_footer', 'generate_construct_footer' );
            remove_action( 'generate_footer', 'generate_construct_footer_widgets' );
        }
    }
    add_action( 'after_setup_theme','dynamic_landing_pages' );

    And it still doesn’t hide the footer widgets area. I’ve also tried again with wp instead of after_setup_theme but it made no difference, it also doesn’t work.

    How can I make the footer widgets area disappear inside this function?

    #1823656
    Elvin
    Staff
    Customer Support

    Hi Gerard.

    If you’re trying this out on ?landing=1, it makes sense that it won’t work because the condition $_GET['landing'] == true within code is for ?landing=true

    If you have multiple landing param values, you’ll have to specify them on the condition.

    Example:

    if ( isset( $_GET['landing'] ) && $_GET['landing'] == 1 || $_GET['landing'] == 2 || $_GET['landing'] == 3 )

    #1823666
    Gerard

    Hi Elvin,

    It works, you can check it by opening the URLs I’ve provided as private information in the previous reply. You will see that without the parameter the page loads with header and footer, while with parameter, the header and footer bar disappear (not yet the footer widget area).

    In fact, I’m using a loose comparison (==) and not a strict one (===), so both true and 1 values are true. With the same provided link, you can try to change the ?landing=1 to ?landing=0 and then the header will appear again, since 0 would mean false.

    That is not the issue, and we do still need to find the right hook or filter to hide the footer widgets area (without depending on IDs, since this code should be made to work on any website using GeneratePress).

    Thanks,
    Gerard

    #1823685
    Elvin
    Staff
    Customer Support

    Ah good so it takes boolean rather than true as a string.

    Another issue I see is that, if add_action() has priority assigned to it, we must specify the priority value as well when we remove it.

    I believe remove_action( 'generate_footer', 'generate_construct_footer_widgets' ); has a priority value of 5.

    That said, we must include that in the code when we try to remove it.

    Try this:

    // Add the ability to hide elements when a "landing" query string with true value is present.
    function dynamic_landing_pages ()
    {
        if ( isset( $_GET['landing'] ) && $_GET['landing'] == true )
        {
            remove_action( 'generate_header', 'generate_construct_header' );
            remove_action( 'generate_footer', 'generate_construct_footer' );
    		remove_action( 'generate_footer', 'generate_construct_footer_widgets', 5 );
        }
    }
    add_action( 'after_setup_theme','dynamic_landing_pages' );
    #1823737
    Gerard

    Done, this is code now:

    // Add the ability to hide elements when a "landing" query string with true value is present.
    function dynamic_landing_pages ()
    {
        if ( isset( $_GET['landing'] ) && $_GET['landing'] == true )
        {
            remove_action( 'generate_header', 'generate_construct_header' );
            remove_action( 'generate_footer', 'generate_construct_footer' );
            remove_action( 'generate_footer', 'generate_construct_footer_widgets', 5 );
        }
    }
    add_action( 'after_setup_theme','dynamic_landing_pages' );

    Yet, the footer widgets area continues to appear. I have also tried lowering and increasing the priority number, but again it made no difference.

Viewing 15 posts - 1 through 15 (of 18 total)
  • You must be logged in to reply to this topic.