Full Page Layout Question

  • I have been editing this site purespoon.com but I was not the person who initially set it up in Word Press.

    I am using Woocommerce for our site’s shopping cart. I am trying to get a particular page to display the content/products in full width on:
    https://purespoon.com/shop/

    All pages by default had the left content then a right sidebar on every page. So in order to replace it what I have been doing is going into the web files, and cloning the existing template file and removing the side bar from the code. Then I’d rename that file and set it as the ‘Full Width Template’ in the page attributes. This has worked for every page except this shop page. I desperately need some help so any feedback is appreciated!

    Full Width Shop Page Code example:
    ————————————————————————-

    <?php

    /**

    * Template Name: Shop Full Width
    * Description: A Page Template for Shop Full Width
    *
    * @package WordPress
    * @subpackage Twenty_Eleven
    * @since Twenty Eleven 1.0

    */

    get_header(); ?>

    <div id=”primary” class=”content-area”>
    <div id=”content” class=”site-content” role=”main”>
    <div class=”container”>
    <!–<div class=”left-area”>–>
    <?php /* The loop */ ?>
    <?php while ( have_posts() ) : the_post(); ?>
    <article id=”post-<?php the_ID(); ?>” <?php post_class(); ?>>
    <header class=”entry-header”>
    <h1 class=”entry-title”>

    Shop
    </h1>
    </header>

    <!– .entry-header –>

    <div class=”entry-content”>
    <?php the_content(); ?>
    <?php wp_link_pages( array( ‘before’ => ‘<div class=”page-links”><span class=”page-links-title”>’ . __( ‘Pages:’, ‘twentythirteen’ ) . ‘</span>’, ‘after’ => ‘</div>’, ‘link_before’ => ‘<span>’, ‘link_after’ => ‘</span>’ ) ); ?>
    </div>

    <!– .entry-content –>

    <footer class=”entry-meta”>
    <?php edit_post_link( __( ‘Edit’, ‘twentythirteen’ ), ‘<span class=”edit-link”>’, ‘</span>’ ); ?>
    </footer>

    <!– .entry-meta –>

    </article>

    <!– #post –>

    <?php comments_template(); ?>
    <?php endwhile; ?>
    </div>

    <!–.end left-area –>

    <br class=”clear”/>
    </div>

    <!– end .container –>

    <!– </div>–>

    <!– #content –>

    </div>

    <!– #primary –>

    <br class=”clear”/>
    <?php get_footer(); ?>

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

  • Remove the class value from the following <div class=”left-area”> to read <div>
    I wouldn’t remove the div just in case it creates a side-effect. But feel free to test it out.

    I ran a quick check on the site and removing the class seemed to work.

    Thread Starter joshjimenez

    (@joshjimenez)

    Thank you for your response theisel!

    Hmmmm, it looks like that particular left area was commented out to begin with? What am I missing here? I did remove it and now the code reads:

    ———————————————————-

    <?php

    /**

    * Template Name: Shop Full Width
    * Description: A Page Template for Shop Full Width
    *
    * @package WordPress
    * @subpackage Twenty_Eleven
    * @since Twenty Eleven 1.0

    */

    get_header(); ?>

    <div id=”primary” class=”content-area”>
    <div id=”content” class=”site-content” role=”main”>
    <div class=”container”>
    <!–<div>–>
    <?php /* The loop */ ?>
    <?php while ( have_posts() ) : the_post(); ?>
    <article id=”post-<?php the_ID(); ?>” <?php post_class(); ?>>
    <header class=”entry-header”>
    <h1 class=”entry-title”>

    Shop
    </h1>
    </header>

    <!– .entry-header –>

    <div class=”entry-content”>
    <?php the_content(); ?>
    <?php wp_link_pages( array( ‘before’ => ‘<div class=”page-links”><span class=”page-links-title”>’ . __( ‘Pages:’, ‘twentythirteen’ ) . ‘</span>’, ‘after’ => ‘</div>’, ‘link_before’ => ‘<span>’, ‘link_after’ => ‘</span>’ ) ); ?>
    </div>

    <!– .entry-content –>

    <footer class=”entry-meta”>
    <?php edit_post_link( __( ‘Edit’, ‘twentythirteen’ ), ‘<span class=”edit-link”>’, ‘</span>’ ); ?>
    </footer>

    <!– .entry-meta –>

    </article>

    <!– #post –>

    <?php comments_template(); ?>
    <?php endwhile; ?>
    </div>

    <!–.end left-area –>

    <br class=”clear”/>
    </div>

    <!– end .container –>

    <!– </div>–>

    <!– #content –>

    </div>

    <!– #primary –>

    <br class=”clear”/>
    <?php get_footer(); ?>

    Thread Starter joshjimenez

    (@joshjimenez)

    Actually I did see what you mentioned on deleting the div class from the actual page, but im not sure why it doesnt display on the template listed?

    If I go into chromes inspect element, I can see the actual file with the div you mentioned. Then I removed the code and I see it display full screen as you mentioned.

    When I go to the URL that you provided I see a different layout. Are you editing the correct template? Removing the class “left-area” from the div will do the trick, based on the live template.

    This a snippet of the source code of what i see

    <div id="primary" class="content-area">
  <div id="content" class="site-content" role="main">
    <div class="container">
      <div class="left-area">
        <h1 class="page-title">Shop</h1>
        <div class="page-description">
...

    Get a copy of the current live template and compare against your current changes.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Full Page Layout Question’ is closed to new replies.