Title: Full width post
Last modified: February 3, 2018

---

# Full width post

 *  Resolved [ageingdj](https://wordpress.org/support/users/ageingdj/)
 * (@ageingdj)
 * [8 years, 3 months ago](https://wordpress.org/support/topic/full-width-post-7/)
 * Hi there, Back again!
    I still haven’t got anywhere with this. All I want is 
   to get the post full width (with _no_ sidebars or sidebar place holders) and 
   to get rid of the border around each of the sections – nothing I do works! (I
   really don’t want to have change theme just to get this to work).
 * The post is marked private & the code is on it’s own template file.
    The tutorial
   I’m following is [here](https://www.youtube.com/watch?v=_gJnNo63x9o) (at about
   4 mins).
 * Here’s the code:
 *     ```
       <?php
   
       /**
       * Template Name: zzAnotherTry
       * Template Post Type: post
        **/
   
       add_action('full_width_content', 'do_full_width_content' );
   
       add_filter('body_class', 'add_full_width_body_class' );
       function add_full_width_body_class($classes) {
   
        $classes[] = 'full-width-template';
   
        return $classes;
   
       }
   
   
   
       function do_full_width_content(){ 
   
       ?>
   
       <main>
   
       <?php // check if the flexible content field has rows of data ?>
   
       <?php if( have_rows('flexible_content') ): ?>
   
        <?php // loop through the rows of data ?>
           <?php while ( have_rows('flexible_content') ) : the_row(); ?>
   
        <?php // check current row layout ?>
               <?php if( get_row_layout() == 'hero' ): ?>
        <section>
        <div class="hero" style="background-image:url(<?php the_sub_field('hero_image') ?>)">
   
        <div class="cta_container">
        <div class="cta_content">
        <div class="cta_content wrap">
        <h2><?php the_sub_field('hero_text'); ?></h2>
   
        <?php $selected = get_sub_field('display_cta_button'); ?>
   
        <?php if( in_array( true , [$selected]) ) { ?>
   
        <a class="button" href="<?php the_sub_field('hero_cta_button_url') ?>"><?php the_sub_field('hero_button_text'); ?></a>
   
        <?php } else { ?>
   
        <!--no content--> <?php } ?>
        </div>
        </div>
        </div> 
        </div>
        </section> 
               <?php endif; ?>
   
        <?php // check current row layout ?>
               <?php if( get_row_layout() == 'text-image' ): ?>
        <section>
   
        <div class="text-image">
        <div class="text-left <?php the_sub_field('css_class')?>"><?php the_sub_field('left_text'); ?></div>
        <div class="image-right"><img src="<?php the_sub_field('right_image') ?>"/></div>
        </div>
   
        </section> 
               <?php endif; ?>
   
        <?php // check current row layout ?>
               <?php if( get_row_layout() == 'image-text' ): ?>
        <section>
   
        <div class="image-text">
        <div class="image-left"><img src="<?php the_sub_field('left_image') ?>"/></div>
        <div class="text-right <?php the_sub_field('css_class')?>"><?php the_sub_field('right_text'); ?></div>
        </div>
   
        </section> 
               <?php endif; ?>
   
   
           <?php endwhile; ?>
   
       <?php else : ?>
           <?php // no layouts found ?>
       <?php endif; ?>
       </main>
       <?php
       }
       get_header();
       do_action('full_width_content');
       get_footer();
       ```
   
 * Added to Style.CSS:
 *     ```
           .full_width_template .site_inner{
           max-width:100%;
           padding: 0;
       }
       /* Template for arty posts */
       /* Section 1 -- Hero Section */ 
       .hero {
        background-size: cover;
        position: relative;
        background-position: center;
       }
   
       .cta_container {
        text-align: center;
        vertical-align: middle;
        background-color: rgba(0, 0, 0, 0.52);
        background: rgba(0, 0, 0, 0.52);
        color:rgba(0, 0, 0, 0.52);
       }
   
       .cta_content {
        padding: 100px 10px;
        color: white;
       }
       .widget-area {
           display: none;
       }
       /* Section 2 & 3 -- Image Text -- Text Image*/
   
        .image-text,
        .text-image {
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        }
   
       .image-left,
       .text-right,
       .image-right,
       .text-left {
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
        width: 50%;
       }
   
       .text-right,
       .text-left {
        padding: 0 80px;
           vertical-align: middle;
       }
   
       .dark {
        background: #000;
        color: white;
       }
       ```
   
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Ffull-width-post-7%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

Viewing 5 replies - 1 through 5 (of 5 total)

 *  [sacredpath](https://wordpress.org/support/users/sacredpath/)
 * (@sacredpath)
 * Automattic Happiness Engineer
 * [8 years, 3 months ago](https://wordpress.org/support/topic/full-width-post-7/#post-9940645)
 * I would have to be able to see the actual page in order to figure out what would
   be needed to get it full width. I’m getting a “not found” when I click on the
   link you provided.
 *  Thread Starter [ageingdj](https://wordpress.org/support/users/ageingdj/)
 * (@ageingdj)
 * [8 years, 3 months ago](https://wordpress.org/support/topic/full-width-post-7/#post-9940727)
 * Hi there,
    Apologies, it was marked as Private. It’s now changed to Public so
   should me viewable (and, as you can see, I’ve been playing). WP is giving me 
   the same URL ([https://ageingdj.com/2017/11/13/a-new-template/](https://ageingdj.com/2017/11/13/a-new-template/)).
 * All I want is to get rid of the secondry sidebars.
 * Many thanks
 *  [sacredpath](https://wordpress.org/support/users/sacredpath/)
 * (@sacredpath)
 * Automattic Happiness Engineer
 * [8 years, 3 months ago](https://wordpress.org/support/topic/full-width-post-7/#post-9941208)
 * I’m not seeing any secondary sidebars, but if you want the content full-width
   on that particular page, give this a try.
 *     ```
       .post-template-zzTemplatePaulFrontPage2 #content.site-wrapper {
           max-width: 100%;
       }
       .post-template-zzTemplatePaulFrontPage2 #content.site-wrapper section {
         height: auto;
       }
       ```
   
 *  Thread Starter [ageingdj](https://wordpress.org/support/users/ageingdj/)
 * (@ageingdj)
 * [8 years, 3 months ago](https://wordpress.org/support/topic/full-width-post-7/#post-9943735)
 * Hi there,
    So many thanks for that (I was sooo close).
 *  [sacredpath](https://wordpress.org/support/users/sacredpath/)
 * (@sacredpath)
 * Automattic Happiness Engineer
 * [8 years, 3 months ago](https://wordpress.org/support/topic/full-width-post-7/#post-9944184)
 * You are welcome.

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Full width post’ is closed to new replies.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/harmonic/1.1.2/screenshot.png)
 * Harmonic
 * [Support Threads](https://wordpress.org/support/theme/harmonic/)
 * [Active Topics](https://wordpress.org/support/theme/harmonic/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/harmonic/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/harmonic/reviews/)

## Tags

 * [full-width](https://wordpress.org/support/topic-tag/full-width/)

 * 5 replies
 * 2 participants
 * Last reply from: [sacredpath](https://wordpress.org/support/users/sacredpath/)
 * Last activity: [8 years, 3 months ago](https://wordpress.org/support/topic/full-width-post-7/#post-9944184)
 * Status: resolved