Remove the sidebar in your Divi category view.

So, I’m in the process of putting the final touches on part two of my child themes series when I get a request from another Divi developer, Patricia. She is building a site for a client and she wants the post category list view to not show the sidebar. What a perfect way to showcase the power of a child theme.

Step 1 – Prepare the template

Patricia was already working in a child theme (experienced developer that she is), so I didnt need to create one for her. As Patricia wants to manipulate the category list view, all I have to do is create an archive.php file inside her child theme, copy all the code inside the index.php file from the Divi theme to the child theme archive.php file and make some changes.

This is the contents of /themes/Divi/index.php

The two things we need to remove are the ‘left-area’ div article list wrapper, and the get_sidebar(); function call. (You could also just leave the left-area div there if you want and style it to be wider but I prefer to remove it entirely)

So our new /themes/child-theme/archive.php file looks like this:

Step 2 – add some style

If you just implement the archive.php as is you will see that the borderline between the content and the sidebar still appears. This is because Elegant Themes have implmented this border on the before psuedo class of the ‘content-area’ div. So we need to add a little CSS to our child theme style.css file to effectively ‘hide’ the border.

And that’s it. One template, remove a couple of lines of code, a small css snippet and all your article archive/category pages will now no longer have the default sidebar. I’ve created a GitHub repository if you want to download the files to use in your next project.

Happy Diviing.


Posted

in

by

Comments

9 responses to “Remove the sidebar in your Divi category view.”

  1. Noëlle Steegs Avatar
    Noëlle Steegs

    Hi Jonathan, I just used this tutorial for a client’s site (Divi 3.0.5) and it worked perfectly. Thank you for taking the time to publish this.

    1. Jonathan Avatar
      Jonathan

      Hi Noëlle, thank you for your kind words.

      It makes it that much more special when I help a member of the WordPress and Divi community who also just happens to be a fellow South African 😉

  2. Robert Avatar
    Robert

    Hey Jonathan, if I wanted to so the post from a custom post type created could you tell me what and where this code needs to be added?

    If it’s to much to put into one comment could you point me in the right direction to read more on this.

    Thanks,
    Robert

    1. Jonathan Avatar
      Jonathan

      Hi Robert

      As far as I know this should work for a custom post type category view as well, unless a different template is being used for the CPT category view.

      If this doesn’t work, you’ll need to determine which template is being used to render the category view for your CPT.

  3. MrWP Avatar

    Top! It works, thanks for sharing!

    So many snippets needed to get what we want with Divi.

    The posts like this allow to save a lot of time.

  4. Martin Goldammer Avatar
    Martin Goldammer

    Hi,
    This tutorial is really good, but I have a problem with sidebar bordeline. I put CSS part to style.css, but this change has not any reaction. Page is fullwidth but bordeline is stil on the same place. Do you know how to remove it?
    Thank you for reply

    1. Jonathan Avatar
      Jonathan

      Hi Martin

      It could be from any number of reasons. Perhaps you could post your site url here (or email it to me) and I can take a look.

      1. Martin Goldammer Avatar

        Hi,
        sure,
        Articles are migrated from drupal to wordpress and all are add to blog category. I dont know how to set default fullwidth on blog post. if you can help me I will be grateful.

  5. Evo Avatar
    Evo

    Hey Jonathan,

    Thanks for sharing this…
    Is there a simple way to desactivate the sidebars on projects as well? On every projects automatically not one by one?…

    Huge thanks!

Leave a Reply to MrWPCancel reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.