WordPress.org

Ready to get started?Download WordPress

Forums

Twenty Eleven - Page Template (9 posts)

  1. geneburwood
    Member
    Posted 1 year ago #

    Hey Folks - I am trying to create a widget area for the top of each page, right under the menu for Twenty Eleven. I created a new page template; code is here:

    <?php
    /**
    * Template Name: TEST Template
    * Description: A Page Template that adds a sidebar to pages
    *
    * @package WordPress
    * @subpackage Twenty_Eleven
    * @since Twenty Eleven 1.0
    */
    
    get_header(); ?>
    
    <div id="primary">
    
    <?php if ( is_active_sidebar( 'custom' ) ) : ?>
    <div class="widget-area">
    <?php dynamic_sidebar( 'custom' ); ?>
    <?php endif; ?>
    
    <?php while ( have_posts() ) : the_post(); ?>
    
    <?php get_template_part( 'content', 'page' ); ?>
    
    <?php comments_template( '', true ); ?>
    
    <?php endwhile; // end of the loop. ?>
    
    </div><!-- #content -->
    </div><!-- #primary -->
    
    <?php get_sidebar(); ?>
    <?php get_footer(); ?>

    Everything went well, but I've managed to push the sidebar down on page...... http://108.167.147.21/~mrmaz00/another-test-page/
    TIA!

    BTW - the image of the young girl is in the custom widget from this thread!

  2. Rob Falla
    Member
    Posted 1 year ago #

    There is an issue with your style sheet.

    div main contains
    primary div width 100%
    secondary div width 18.8%

    Also, the image of the young girl is in the primary div too, so it effects the width of that div.

  3. geneburwood
    Member
    Posted 1 year ago #

    thanks for the response, i'm realatively new at the 'design' side of this, so please bear with me..!
    I'm inspecting the element via firebug, but probably don't fully understand what needs to change or more appropriately where/how to change it.

    TIA

  4. alchymyth
    The Sweeper & Moderator
    Posted 1 year ago #

    this needs an adjustment (removal) of the 'body_class' .singular - I have written a tutorial for 'page template with sidebar' in a Twenty Eleven child theme which explains what to do:
    http://www.transformationpowertools.com/wordpress/twenty-eleven-new-page-template-with-sidebar-correction

    ps:
    please do not edit the default theme Twenty Eleven directly, but create a child theme to work with - http://codex.wordpress.org/Child_Themes

  5. geneburwood
    Member
    Posted 1 year ago #

    Thanks, alchyrmyth, I did as you suggested and now the sidebar "rides up" into the new custom widget area as seen here:

    http://108.167.147.21/~mrmaz00/another-test-page/

    I could really use some guidance on the styling side of the house!!

    thanks

  6. alchymyth
    The Sweeper & Moderator
    Posted 1 year ago #

    start by repairing your page template:

    <?php
    /**
    * Template Name: TEST Template
    * Description: A Page Template that adds a sidebar to pages
    *
    * @package WordPress
    * @subpackage Twenty_Eleven
    * @since Twenty Eleven 1.0
    */
    
    get_header(); ?>
    
    <div id="primary">
    <div id="content" role="main">
    
    <?php if ( is_active_sidebar( 'custom' ) ) : ?>
    <div class="widget-area">
    <?php dynamic_sidebar( 'custom' ); ?>
    </div><!--/ .widget-area / custom -->
    <?php endif; ?>
    
    <?php while ( have_posts() ) : the_post(); ?>
    
    <?php get_template_part( 'content', 'page' ); ?>
    
    <?php comments_template( '', true ); ?>
    
    <?php endwhile; // end of the loop. ?>
    
    </div><!-- #content -->
    </div><!-- #primary -->
    
    <?php get_sidebar(); ?>
    <?php get_footer(); ?>

    that should put things back into place.

    then continue with the formatting:
    - do you want the lady to show full width across the top?

  7. geneburwood
    Member
    Posted 1 year ago #

    thank you, but i don't see the difference in what i had, vs what you put.

    Yes, what i did was try to create a custom widget area across the top of the content area that would be right up against the bottom of the menu. That worked well with the exception of the page formatting (a big part!!)

    So what i did was create the following in the functions.php:

    /**  Customizations for Schindel
    */
    register_sidebar(array(
    	'name'=> 'Custom Widget Area',
    	'id' => 'custom'
    ));
  8. alchymyth
    The Sweeper & Moderator
    Posted 1 year ago #

    thank you, but i don't see the difference in what i had, vs what you put.

    this is probably the cause of the problems.

    in your code there was the closing </div> missing - corrected below:

    <?php if ( is_active_sidebar( 'custom' ) ) : ?>
    <div class="widget-area">
    <?php dynamic_sidebar( 'custom' ); ?>
    </div>
    <?php endif; ?>

    with your edits, you had also accidentally this line removed:

    <div id="content" role="main">

    create a custom widget area across the top of the content area

    to allow that to stretch across the site, it would need to be inserted before

    <div id="primary">
    <div id="content" role="main">

    after the relocation of your custom widget code, your page template should look like:
    http://pastebin.com/L2mPqsmV

  9. geneburwood
    Member
    Posted 1 year ago #

    speed kills..........especially when reviewing your own work!!!!

    thank you...

    i'm a really good 'hacker' just never evolved into a great developer!!!

    short of wordpress.org, any good recommendations on wordpress 102 and CSS ???

    thanks again for your help!

Topic Closed

This topic has been closed to new replies.

About this Topic