• Hi
    How can i add a right colmun please, i use a child theme of fictive template.
    Thanks for your help

Viewing 1 replies (of 1 total)
  • Hi @adiboo67,

    Adding a third column to Fictive is a large layout change that requires some comfort with PHP, HTML, and CSS. The level of customisation required goes beyond the scope of support this forum is intended for, however, I can definitely help point you in the right direction. 🙂

    You’ve already completed the first step to customising your theme, which is to set up a child theme. Great!

    Next, copy/paste the following files for your parent theme to the child theme’s directory:

    • archive.php: Defines the layout for archive page, such as a listing of posts in a certain category.
    • index.php: Defines the layout for the default page that lists all of your site’s posts.
    • page.php: Defines the layout for single pages.
    • single.php: Defines the layout for single posts.

    I recommend inserting the code for your third sidebar just before the following code for the footer – <?php get_footer(); ?> – in the above files:

    If you intend to display the widgets that you add to the sidebar area via Appearance > Widgets in your third column then add <?php get_sidebar(); ?>. (More information on this WordPress function can be found here.)

    You will then need to copy the theme’s header.php file to your child theme’s directory and remove the reference to <?php get_sidebar(); ?> there (this will stop the widgets from appearing in your default left sidebar).

    Completing the above steps will get you your third column on the right, with your widgets in the right hand column. You will then need to style the layout with some CSS to get it looking as you wish.

    I tested the above steps on my own site and was able to get the third column looking good on the right by adding the following to my child theme’s style.css file:

    .content-area {
        width: 60%;
        margin-right: 30px;
        margin-left: 30px
    }
    
    .site-content {
        float: left;
    }
    
    #secondary {
        float: left;
        width: 30%;
    }

    The specific CSS you need may differ depending on your site’s content, however.

    Hope the above is helpful! Let me know how you get on. If smaller customisation questions come up as you walk through the above, then please feel free to share a link to your site and we can take a look or point you in the right direction.

    Thanks!

Viewing 1 replies (of 1 total)
  • The topic ‘How to add a third columns’ is closed to new replies.