Creating a full width template for Wordpress

Question

I'm using the extended lockdown period to begin looking at creating a theme for Wordpress. I would like to create a template that allows me to display full-width content. My theme is using Bootstrap and an example page is here: https://www.davidhazeel.com/test-page/

By default, my body has 20% padding applied on the left and right. To make my full-width template I'm guessing I just need to ignore this. My simple full-width template looks like this:

get_header();
?>

<div class="no-body-padding">
    <main id="primary" class="site-main ">

        <?php
        while ( have_posts() ) :
            the_post();

            get_template_part( 'template-parts/content', 'page' );

            if ( comments_open() || get_comments_number() ) :
                comments_template();
            endif;

        endwhile;
        ?>

    </main>
</div>

<?php
get_sidebar();
get_footer();

And my CSS looks like this:

.no-body-padding body {
    padding-left: 0% !important;
    padding-right: 0% !important;
}

And the body element CSS is:

body {
    background-color: #086788 !important;
    padding-top: 5%;
    padding-left: 20%;
    padding-right: 20%;
    height: 100%;
    overflow-x: hidden;

However the padding is still there, as you can see in the link above. Any help would be hugely appreciated.

Edit

Here is how I would like it to look: Screenshot

Answer 1

You only have a litte mistake, but you were on the right track.

This CSS statement .no-body-padding body { makes the code look for a body element inside of an element with the class .no-body-padding . Well, there is no such element inside this div. So nothing happens.

You need to give this class to the body element of your page, which can be found in the header.php of your theme.

You can duplicate (copy) the header.php and name it header-fullwidth.php .

In the duplicate you add the class inside the body html tag. You need to replace this:

<body <?php body_class(); ?>>

with this to have the class added:

<body <?php body_class( 'no-body-padding' ); ?>>

In your CSS you can use the.important statement to be sure this is assigned. But if you put the stylesheet information for the body above and the class (,no-body-padding) styling below this. it should work fine, The code runs from top to bottom. that is why it is called "cascading" stylesheet. So it will be overwritten with the 0 padding.

To use this new created header template, you can just add the name inside the function call of your page template (page.php):

get_header('fullwidth');

Make sure the name of your file (header- fullwidth ) and the parameters in the get_header are the same.

You will also need a page template: duplicate the page.php and call it page-fullwidth.php . In this file, you add at the top /* Template Name: Fullwidth */ and then do the changes within the get_header() (add 'fullwidth'). After that, you can go in the wp-admin backend and edit a page. On the right side under "page attributes" you will find the page templates to select. Save the page and you have your fullwidth style.

Hope this helps!

Creating a full width template for Wordpress

Question

1 answers

solution1
0 ACCPTED 2020-05-17 17:19:57

Creating a full width template for Wordpress

Question

1 answers

solution1 0 ACCPTED 2020-05-17 17:19:57

solution1
0 ACCPTED 2020-05-17 17:19:57