Fourteen: Full width custom page template
-
Need: keep header and footer just as in Twenty-Fourteen but make the body (in the middle) full width, no sidebar, no widget, no unused white space.
Makphisto paid a developer to come up with a solution in the form of a custom page template, in order to insert a table in the middle (see topic: “Twenty Fourteen – Need Help With a Custom Page Template”).
I tried the proposed code. My need is to put a picture, not a table, in the middle. I inserted a .png picture of 1080 x 1440 px in wp-content/uploads/2014/01 and used it on this newly created custom page. The resulting page is full width but the image got redimensioned, without my will, to 1080 x 572px… even though it is still 1080 x 1440 in the /2014/01 folder; not very good looking to say the least.
I following Makphisto instructions’ but did put the template file in a child theme:
Copy and past that into Notepad, save the file as no-sidebar-full-width.php (the PHP is important!). Using an FTP program, FTP that file to your server (/www/wp-content/themes/child-2014/). Then, in WordPress admin, change the page template of your page to “No Sidebar, Full Width”.<?php /** * Template Name: No Sidebar, Full Width * */ get_header(); ?> <style> #secondary { display: none !important; } .site-content .entry-header, .site-content .entry-content, .site-content .entry-summary, .site-content .entry-meta, .page-content, .hentry, .entry-content { max-width: 1260px !important; } #tablepress-1 { width: 100% !important; } .site-content, .site-main .widecolumn { margin-left:0 !important; } .site-content { margin-right:0 !important; } .site:before { width:0px !important; } </style> <div id="primary" class="content-area"> <div id="content" class="site-content" role="main"> <?php // Start the Loop. while ( have_posts() ) : the_post(); // Include the page content template. get_template_part( 'content', 'page' ); // If comments are open or we have at least one comment, load up the comment template. if ( comments_open() || get_comments_number() ) { comments_template(); } endwhile; ?> </div><!-- #content --> </div><!-- #primary --> <?php get_sidebar(); get_footer();
I also tried to change max-width: 1260px !important; to something different than 1260px. Doing so, I lost the ability of the main menu to stick to the top as a user scrolls down.
Help anyone for the picture to show full height?
- The topic ‘Fourteen: Full width custom page template’ is closed to new replies.