[Resolved] Rearrange elements on paged pages

[Fergal]

Hey there,

I have elements that are used on my front page (blog page) and I like the layout on my home page. However, I’d like to rearrange them on my paged pages.

Can you please advise?

Thanks,
Fergal

[Leo]

Hi Fergal,

Just to make sure I fully understand, are you looking to rearrange those 3 elements on the paged pages only?

Let me know 🙂

[Fergal]

Hey Leo,

That is correct! I’m happy with the homepage arrangement as is.

Thanks,
Fergal

[Leo]

Hmm a little bit tricky but let’s give CSS solution a shot.

Can you start by adding a unique class to the container on the very outside of each of those elements?
https://docs.generateblocks.com/article/container-overview/#advanced

Let me know 🙂

[Fergal]

Hey Leo,

Thanks for the suggestion. I just thought of another approach that I decided to give a try first. I duplicated the 3 elements that I want to rearrange and then used the following code to just show them on paged pages. And this code also just shows the original 3 elements on the homepage. Is there anything potentially wrong with this approach or a way to improve this code? Is the CSS route the preferred route?

// show home page featured jobs just on front page and not blog page
add_filter( 'generate_block_element_display', function( $display, $element_id ) {
    if ( 285 === $element_id && is_paged() ) {
        $display = false;
    }

    return $display;
}, 10, 2 );

// show paged featured jobs just on paged pages
add_filter( 'generate_block_element_display', function( $display, $element_id ) {
    if ( 425 === $element_id && is_home() ) {
        $display = false;
    }

    if ( 425 === $element_id && is_paged() ) {
        $display = true;
    }

    return $display;
}, 10, 2 );

// show home page newsletter optin just on front page and not blog page
add_filter( 'generate_block_element_display', function( $display, $element_id ) {
    if ( 423 === $element_id && is_paged() ) {
        $display = false;
    }

    return $display;
}, 10, 2 );

// show paged newletter optin just on paged pages
add_filter( 'generate_block_element_display', function( $display, $element_id ) {
    if ( 426 === $element_id && is_home() ) {
        $display = false;
    }

    if ( 426 === $element_id && is_paged() ) {
        $display = true;
    }

    return $display;
}, 10, 2 );

// show All Jobs Page number just on front page and not blog page
add_filter( 'generate_block_element_display', function( $display, $element_id ) {
    if ( 390 === $element_id && is_paged() ) {
        $display = false;
    }

    return $display;
}, 10, 2 );

// show paged All Jobs Page number just on paged pages
add_filter( 'generate_block_element_display', function( $display, $element_id ) {
    if ( 427 === $element_id && is_home() ) {
        $display = false;
    }

    if ( 427 === $element_id && is_paged() ) {
        $display = true;
    }

    return $display;
}, 10, 2 );

[Fernando]

Hi Fergal,

Your approach is good as well. You would just need to make sure the duplicated Elements will be manually updated if you make changes on the original.

If you go with the CSS approach, you wouldn’t need to worry about updating the duplicated Elements.

[Fergal]

Hey Fernando,

Makes perfect sense! The CSS route sounds better. I’ve undone the duplicated elements and php code route and have added a unique CSS class to the container on the very outside of each of those elements as recommended by Leo.

I look forward to the next steps.

Thanks,
Fergal

[Fernando]

Try this CSS:

body.blog[class^='paged'] main#main, body[class*=' paged'] main#main{
    display: flex;
    flex-direction: column;
}

body.blog[class*=' paged'] .my_featuredjobs_container {
    order: 1;
}

body.blog[class*=' paged'] .my_newsletter_container {
    order: -1;
}

[Fergal]

Hey Fernando,

Thanks for the CSS I think we are moving in the right direction. Please see my feedback and let me know your thoughts.

Thanks,
Fergal

[Ying]

Try add this CSS:

body.blog[class*=' paged'] .my_jobsnumber_container, body.blog[class*=' paged'] .site-main>article, body.blog[class*=' paged'] nav#nav-below{
    order: -1;
}

And change this CSS:

body.blog[class*=' paged'] .my_featuredjobs_container {
    order: 1;
}

to:

body.blog[class*=' paged'] .my_featuredjobs_container {
    order: 0;
}

[Fergal]

Hey Ying,

Thank you. Should this be my CSS at this point?

body.blog[class^='paged'] main#main, body[class*=' paged'] main#main{
    display: flex;
    flex-direction: column;
}

body.blog[class*=' paged'] .my_jobsnumber_container, body.blog[class*=' paged'] .site-main>article, body.blog[class*=' paged'] nav#nav-below{
    order: -1;
}

body.blog[class*=' paged'] .my_featuredjobs_container {
    order: 0;
}

body.blog[class*=' paged'] .my_newsletter_container {
    order: -1;
}

[Ying]

We can combine some of them together, so the final CSS would be:

body.blog[class^='paged'] main#main, body[class*=' paged'] main#main{
    display: flex;
    flex-direction: column;
}
body.blog[class*=' paged'] .my_jobsnumber_container,body.blog[class*=' paged'] .my_newsletter_container, body.blog[class*=' paged'] .site-main>article, body.blog[class*=' paged'] nav#nav-below{
    order: -1;
}
body.blog[class*=' paged'] .my_featuredjobs_container {
    order: 0;
}

[Fergal]

Thanks Ying. I combined them and this is what I see so far:

https://imgur.com/a/Ivm5LIS

I’d like to shift the featured jobs section to right below the “All Jobs” title, please advise.

[Fernando]

Hi Fergal,

This is in the Homepage – Page 1 right?

If so, the code we provided affects only the pages 2 onwards. You can manually rearrange the Blocks in Page 1 or change the priority if you’re using a Block Element to rearrange them.

[Fergal]

Hey Fernando,

The homepage looks great. The screenshots are from:

• page 2 onwards
• .com/job-openings/ archive
• .com/job-openings/page/2 onwards

These are the elements and there is also php code that we setup to display All Jobs title text:
https://imgur.com/a/ckdLwqI

Does this all check out? If it looks good I’ll now work on rearranging the priorities to see if it does the trick and report back to you.

Thanks,
Fergal

[Author]

Posts