Are you a GenerateCustomer?

Do you have an active GP Premium or GenerateBlocks Pro license key?

Create a GenerateSupport account for GeneratePress and GenerateBlocks support in one dedicated place.

Create an account
Already have a GenerateSupport account? Login

Just browsing?

Feel free to browse the forums. Support for our free versions is provided on WordPress.org (GeneratePress, GenerateBlocks).

Want to become a premium user? Learn more below.

Sidebar full length of pages – i.e. to right (or left) of header and footer?

  • Hello GeneratePress,

    I inherited being the webspinner for this site
    https://olyarts.org/
    which has a different theme [Minimal Lite Pro], and I’ve created a staging site and installed GeneratePress (which I use on several other websites) on it:
    https://olyarts.org/oly-arts

    I have just started figuring out how to make it work, and the other designer I work with sent me this mockup I am working on making the site look like:
    https://olyarts.org/oly-arts/wp-content/uploads/2023/05/OLYARTS-goal-layout-scaled.jpg

    So, my question at this point is:
    Is there a way to have the sidebar go all the way to the top (and bottom) of pages, i.e. to the right of the header and footer? I’ve searched here and didn’t find anything on specifically to do this.

    Thank you,
    Gabi Clayton

  • Hi there,

    the staging site requires a login. Can you share one in the Private Information field

  • Sure. I’ll put it there now.

  • Okay it is there now.

  • That’s possible.

    1. Create 2 new hook elements at appearance > elements, so we can wrap the original site content with <div>

    Hook element #1:
    – content: <div class="original-site">
    – hook: generate_before_header
    – location: entire site

    Hook element #2:
    – content: </div>
    – hook: wp_footer
    – location: entire site

    2. Create a block element – hook at appearance > elements:

    – content: what you want to show in the “sidebar”, as there’s no widget area, you will be using blocks to create the “sidebar” content. Wrap all content with a Container block, and give it an additional CSS class, eg custom-sidebar:https://www.screencast.com/t/kSaFvGd2n5x
    – hook: wp_footer
    – location: entire site

    3. Add this CSS to make the body go flex:

    @media(min-width: 769px) { 
    body {
        display: flex;
    }
    .site-origin {
        flex-basis: 70%;
    }
    .custom-sidebar {
        flex-basis: 30%;
    }
    }

    Let me know if this helps!

  • Thank you, Ying. I’ve been a web designer since 1996 (I’m old) with basic HTML coding, but I mostly avoided CSS. Eventually I moved to WordPress and discovered GeneratePress theme (yay!) I have GP Premium and use GenerateBlocks. I have not yet used hook elements, but I will figure it out thanks to the help information here. I’ll let you know how it goes.

  • Keep us updated!

    Additionally here’re the docs:

    Hook element: https://docs.generatepress.com/article/block-element-hook/
    block element – hook: https://docs.generatepress.com/article/block-element-hook/

    Hook element and block element – hook are pretty much the same, they allow you to insert content into HTML via the theme and WP’s built-in hooks.

    Hook element uses HTML, block element – hook uses blocks.

    Hope you’ll get it to work 🙂

  • I clearly don’t know what I am doing yet.

    I created the hooks and named them
    Full length sidebar hook element #1
    Full length sidebar hook element #2
    Full length sidebar block element hook

    and added the CSS you gave me.

    Now there is no content in the sidebar (I can fix that) but it still doesn’t go the full length of the pages. It is under the header/menu and over the footer.

    What did I miss or mess up?

  • Hi Gabi,

    I tried logging in to the staging site with the credentials provided but they aren’t logging me in. Have you replaced them? Can you check if they are still working?

  • I just checked and then to be sure I reset the password to the same one, and it let me log in. So it should work.

  • I cannot access the page either, odd part is its not rejecting the login ie, theres no error, it just returns to the logic screen each time.

    Do I need a different URL ?

  • Hmm, not sure.
    https://olyarts.org/oly-arts/wp-admin
    or
    https://olyarts.org/oly-arts/wp-login

    I was just able to log in with Firefox which had never been there before.

    Gabi

  • I can get to the Dashboard but i cannot view the front end ( it takes me to the WP Staging Login ), which i think is because that user login is not an an Admin

  • Ah, I just made the GeneratePressSupport user an admin. That should fix that.

    thanks,
    Gabi

  • Aha 🙂 I can see it.

    Ok, before we go any further…. couple of questions:

    1. is this new design across the entire site ?
    2. will you be needing sticky navigation ? As thats a potential spanner in the works.

  • Yes, it is a new design staging of this site: https://olyarts.org/

    No, it will not need sticky navigation.

    The original site is active and has been updated and added to since I set up the staging.
    I am hoping that once I/we get it working and set up with GeneratePress Premium, I can activate GeneratePress move all the settings over (copy them in) rather than having to redo all the settings there.

    thanks,
    Gabi

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