WordPress.org

Ready to get started?Download WordPress

Forums

Twenty Thirteen
[resolved] [closed] Full Width Page Template (26 posts)

  1. FVW
    Member
    Posted 11 months ago #

    Hello,

    I already tried to achieve this by researching on different forums, but I did not manage to find a solution; I hope someone of you can help me (and perhaps many others with the same question) :)

    I would like to generate a Full-Width-Template for the Twenty Thirteen Theme.
    Is there someone who could help me with the different codes (for the full-width-page.php the style.css and/or the functions.php if necessary)

    I was not able to locate the right sections which need to be changed in these files...

    Thank you very much!
    Best regards!
    Fabian

  2. LittleBigThings
    Member
    Posted 11 months ago #

    Do you mean by full width page a page that spans the whole screen/browser?

  3. FVW
    Member
    Posted 11 months ago #

    I meant a page without widget sidebar, which uses the space which was reserved for the widgets as well...

  4. WPyogi
    Volunteer Moderator
    Posted 11 months ago #

    Have you set up a child theme? Definitely do not modify a default theme so that your changes are not lost when WP is updated:

    http://codex.wordpress.org/Child_Themes

  5. FVW
    Member
    Posted 11 months ago #

    Yes, I'm using a child theme...

  6. Zulfikar Nore
    Member
    Posted 11 months ago #

    Copy page.php in to your child theme and rename it to full-width.php.

    At the top of the new full-width.php where it reads: * The template for displaying all pages - change that to * Template Name: Full Width.

    In style.css locate the elements

    .entry-header,
    .entry-content,
    .entry-summary,
    .entry-meta {
    	margin: 0 auto;
    	max-width: 604px;
    	width: 100%;
    }

    copy them to your child's style.css and rename thus:

    .entry-header-full,
    .entry-content-full,
    .entry-summary-full,
    .entry-meta-full {
    	margin: 0 auto;
    	max-width: 1110px;
    	width: 95%;
    }

    Back to your new full width template change those elements to match and you should have yourself a full width template which you can tweak to your needs.

  7. thescarletfire
    Member
    Posted 11 months ago #

    Yup, Zulfikar is correct :)
    Also, you may want to delete "<?php get_sidebar(); ?>" from your fullwidth.php if you want to not worry about overlapping sidebars over your full width text, it may or may not be a problem for you.

    Rock on!

  8. FVW
    Member
    Posted 11 months ago #

    Thank you for your help! But I is not properly working :(

    At first nothing changed.

    Then I changed:
    entry-header, entry-content, entry-summary and entry-meta
    in the full-width.php.

    Now the content stretches over the whole width, but it is totally messing up the design of the site (header, navigation, footer, font, etc.). And this not only on the full-width page, but on all other sides as well...

    Another thing would be that I would have to figure out the width of the normal content fields + the sidebar, because I don't want to stretch the content over the whole width...

  9. FVW
    Member
    Posted 11 months ago #

    I figured it out...
    Sorry, my mistake :)

    When uploading the style.css, my ftp-prog messed up the style.css in the the original theme as well... Now it works!

    Last thing I need to find out the width of content-column + the sidebar-column...
    Thank you verry much for helping!

  10. Zulfikar Nore
    Member
    Posted 11 months ago #

    No problem.

    The content width is currently set at 604px.
    Content + Sidebar the width is 1040px taking the padding in to consideration its around 1140px I believe.

    That's why I set the max-width to 1110px and the width to 95% and suggested tweaking to your needs - the omitted 5% gives you an equal padding of 2.5% each side to start you off :)

  11. FVW
    Member
    Posted 11 months ago #

    Ok now it is working, Thank you very much!
    But I forgot, that there are the posts (single.php) as well. :(

    How do I get them to be full width as well?
    How do I change the single.php, because it does not call the same values, right?

    Thank you very much!

  12. Zulfikar Nore
    Member
    Posted 11 months ago #

    The single post handling is different and getting them to be full width is doable but a bit complicated - I think its beyond simple explanations of do this then that and there you have it.

    Let me look in to it and see what may come - but this may take sometime due to the complexity of it.

  13. MarkHedley
    Member
    Posted 11 months ago #

    I had a rough idea of how to do it but this helped primarily with the CSS.
    Thanks

  14. kmckay9
    Member
    Posted 11 months ago #

    I would like to tweak Twenty Thirteen so that it spans the whole width of the screen/browser. There are currently 2 blank columns on either side of the content area that I'd like to get rid of.

  15. FVW
    Member
    Posted 11 months ago #

    @Zulfikar Nore:
    Did you already manage to find a solution for the full width post problem?
    I would really appreciate if you or someone else could help me with that!

    Many thanks in advance!

  16. rchasin
    Member
    Posted 11 months ago #

    I have used these directions and created the full-size page template successfully. Thanks so much for this solution.

    I have one issue as a result that I'm not finding a solution to. When I apply the template to a page that I had coded with custom CSS, the page content, which looked fine in the original template (except for being in the narrower space) now displays as coded, but the background white area no longer covers the height of my content - the default beige background is now behind a good portion of the content. Also, the "edit" icon appears where the white background ends, as it would if the white background was the full height of the content.

    Any ideas why this is happening when I switch the page layout to this full-width template? Thank you.

  17. rchasin
    Member
    Posted 11 months ago #

    Just tried something and it worked. At the footer class tag, I changed "entry-meta-full" to "entry-meta", and that fixed the layout issue.

  18. ajamm
    Member
    Posted 10 months ago #

    Definately needed to comment out the get_sidebar

  19. migf1
    Member
    Posted 10 months ago #

    @Zulfikar: Thanks for the original post, which gave me a head start. However, the proposed solution does not retain the original font style of the page title, neither its vertical margin.

    For me, the following approach seems to work better for a full width page template...

    in child-theme's style.css:

    ...
    .my-full-size {
    	margin-left: auto !important;
    	margin-right: auto !important;
    	height: auto;
    	padding-right: 1em !important;
    }

    And then, in my full-width-page.php file I just add the my-full-size class to the desired elements:

    ...
    <?php /* The loop */ ?>
    <?php while ( have_posts() ) : the_post(); ?>
    
    	<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    		<header class="entry-header my-full-size">
    			<?php if ( has_post_thumbnail() && ! post_password_required() ) : ?>
    			<div class="entry-thumbnail">
    				<?php the_post_thumbnail(); ?>
    			</div>
    			<?php endif; ?>
    
    			<h1 class="entry-title my-full-size"><?php the_title(); ?></h1>
    		</header><!-- .entry-header -->
    
    		<div class="entry-content my-full-size">
    			<?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; ?>
    ...

    This also seems to behave closer to the original behavior of the theme, which centers the <article> elements, leaving plenty of room at both sides (although it leaves more room than the above css).

    I haven't tested it extensively, but so far it seems to work fine.

  20. Larry Holmstrom
    Member
    Posted 9 months ago #

    Zulfikar, I followed your instructions above to make that content area wider. It seems to have had an effect because the edit button within the content area that I see when I'm logged has moved outward significantly. The problem I'm experiencing is that the content still seems to remain within the original content area. If you care to see what I mean the link to the page is here.

    Any help would be appreciated!

  21. migf1
    Member
    Posted 9 months ago #

    @Larry, from what I can tell you haven't disabled the sidebar from your full-width template file. Try removing (or commenting out) the line:

    <?php get_sidebar(); ?>

    from your custom template file.

  22. neomikenet
    Member
    Posted 9 months ago #

    Hi everybody,

    I'm under a 3.7.1 WP with the Twenty Thirteen theme.

    I've followed the whole procedure to modify my pages to full width, by creating a child theme.

    I've been able to activate my child theme but the modifications i've made in my new "full-width-page.php" aren't visible on my website. Checking with Firebug, i've seen that it's still the "page.php" which is used.

    I don't know what i've missed! Can you help me ?!

    Thanks in advance,
    Mickael.

  23. neomikenet
    Member
    Posted 9 months ago #

    I've found a solution to my problem : i've used in my child theme the same name "page.php" and now i can see my modifications.

    I don't know why it was not working whith the previous name.

  24. penguingirl1
    Member
    Posted 8 months ago #

    Hello everyone,

    I'm really new at the editing through style.css but I am working with the twenty thirteen theme and I want to change the width of the content on every page to fill more of the page and have less margin space. I have tried following the instructions above using the custom style css plugin, but nothing changes on my site.

    Any advice is welcome... it could very well me something still I'm doing wrong, but I've tried a variety of things and can't see any results. Please help! The site is http://igalapagos.org/

    Thanks very much!!!!

  25. WPyogi
    Volunteer Moderator
    Posted 8 months ago #

    @penguingirl1 - please start a new thread - this one is marked resolved -

    http://codex.wordpress.org/Forum_Welcome#Where_To_Post

  26. kt22mike
    Member
    Posted 8 months ago #

    Neomikenet or other kind person:

    I have followed your directions but for some reason the edits i included in my twentythirteen-child is not taking effect. My website is capecodrailtrail.org

    Here is my style.css

    /*
     Theme Name:     Twenty Thirteen Child
     Theme URI:      http://example.com/twenty-thirteen-child/
     Description:    Twenty Thirteen Child Theme
     Author:         John Doe
     Author URI:     http://example.com
     Template:       twentythirteen
     Version:        1.0.0
    */
    
    @import url("../twentythirteen/style.css");
    
    /* =Theme customization starts here
    -------------------------------------------------------------- */
    .my-full-size {
    	margin-left: auto !important;
    	margin-right: auto !important;
    	height: auto;
    	padding-right: 1em !important;
    }

    Here is my full-width-page.php

    <?php
    /**
     * Template: full width
     *
     * This is the template that displays all pages by default.
     * Please note that this is the WordPress construct of pages and that other
     * 'pages' on your WordPress site will use a different template.
     *
     * @package WordPress
     * @subpackage Twenty_Thirteen
     * @since Twenty Thirteen 1.0
     */
    
    get_header(); ?>
    
    	<div id="primary" class="content-area">
    		<div id="content" class="site-content" role="main">
    
    			<?php /* The loop */ ?>
    			<?php while ( have_posts() ) : the_post(); ?>
    
    				<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    					<header class="entry-header my-full-size">
    						<?php if ( has_post_thumbnail() && ! post_password_required() ) : ?>
    						<div class="entry-thumbnail">
    							<?php the_post_thumbnail(); ?>
    						</div>
    						<?php endif; ?>
    
    						<h1 class="entry-title my-full-size"><?php the_title(); ?></h1>
    					</header><!-- .entry-header -->
    
    					<div class="entry-content my-full-size">
    						<?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><!-- #content -->
    	</div><!-- #primary -->

    I am using bluehost as my server and I know the child template works as I can activate it and see it running. Not sure what I am doing wrong - is there something I need to do once I open up a page to edit or create a new page? Any advice would be appreciated.

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic