Full-width at Twenty Fourteen Theme

Hi,

Can you post a link to the page that’s not working and a link to a page that uses the template you want to use? Thanks.

Hi,

the new site is secured with .htaccess, at the moment. ??

I did to screenshots:

1) Setting:”Full-width template” // Body Classe: empty

https://s1.directupload.net/images/140205/ekv5evmt.png

2)Setting:”Full-width template” // Body Classe: “full-width”

https://s1.directupload.net/images/140205/nmemgvwj.png

With the secound optinon, the content move only right

Thanks, but I was hoping to be able to see something in the source code.

Different idea: try making a copy of the template you want to use and renaming it single-event.php. If you have events set to display as posts, your theme should use that template for the single events page.

I tested it with the single-event.php. Nothing changed.

As in the tutorial, I copied the config of the body-clas from a page with full-width:

class="page page-id-6 page-child parent-pageid-4 page-template page-template-page-templatesfull-width-php custom-background masthead-fixed full-width singular"

Hiya,

You shouldn’t need to (nor should you) set the body class manually – you should use the body_class() function.

Can you confirm if you copied the full width template file and named it single-event.php? That should so it.

Or, edit your main event page and choose the Full Width template in the drop down.

Thanks

I copied the full-width.php to single-event.php

full-width.php

<?php
/**
 * Template Name: Full Width Page
 *
 * @package WordPress
 * @subpackage Twenty_Fourteen
 * @since Twenty Fourteen 1.0
 */

get_header(); ?>

<div id="main-content" class="main-content">

<?php
	if ( is_front_page() && twentyfourteen_has_featured_posts() ) {
		// Include the featured content template.
		get_template_part( 'featured-content' );
	}
?>

	<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 -->
</div><!-- #main-content -->

<?php
get_sidebar();
get_footer();

The diferent to the normal side is that there is no entry for the right sidebar.

There was no diferent to the other configuration.

not sure if this helps but maybe you can try this link https://sangkrit.net/2013/12/21/tweak-twenty-fourteen-wordpress-theme-make-it-full-width-center-aligned-and-much-more/

This happens because of the way twentyfourteen applies classes to the body.

Infact it doesn’t uses different html layout for for pages without sidebar. It just adds some classes to the body, with a function (that you can find at line 412 of twentyfourteen/functions.php)

I mean, the full width pages are 100% width just because there is this rule in css

.full-width .hentry {
max-width: 100%;
}

if you want a quick hack just edit that function at line 427/432
from this:

if ( ( ! is_active_sidebar( 'sidebar-2' ) )
		|| is_page_template( 'page-templates/full-width.php' )
		|| is_page_template( 'page-templates/contributors.php' )
		|| is_attachment() ) {
		$classes[] = 'full-width';
	}

to this (adding your custom template file name)

if ( ( ! is_active_sidebar( 'sidebar-2' ) )
		|| is_page_template( 'page-templates/full-width.php' )
		|| is_page_template( 'page-templates/contributors.php'
                || is_page_template( 'page-templates/MY-PAGE-TEMPLATE.php' )
		|| is_attachment() ) {
		$classes[] = 'full-width';
	}

obviously you have to put your MY-PAGE-TEMPLATE.php file inside the page-template folder of twentyfourteen.

Instead, if you’re using a child theme, you can just look at the body tag of the page you want to be 100% width and replicate that rule in css for a class present in your page (like it’s done for “full-width”):

.YOUR-CLASS .hentry {
max-width: 100%;
}

Last one: if you can’t find a specific class you can use, just add this snippet in your child theme functions.php
https://stv.whtly.com/2011/02/19/wordpress-append-page-slug-to-body-class/
it adds the current page slug as body class, so you can use it in your css rules.

the ‘full-width’ page tempalte of Twenty Fourteen only refers to the elimination of the right sidebar (if present at all) – the left sidebar remains unchanged.

for a ‘real full width‘ page template see my recent article https://www.transformationpowertools.com/wordpress/real-full-width-page-template-twentyfourteen

alchymyth, indeed your page is a full-full-width ??

Hello everyone,

I have an issue with my full width page. I followed @alchmyth article. But that didn’t fix my problem.

you can see my issue here:
https://www.arthalla.com/store/

I can’t figure out how to remove the right sidebar. I also don’t know why it’s still there. I followed Michaels guide and according to this – it should actually work.

Just can’t find the problem here.. uff…

thx for any little help – appreciate it !

Hi, I tried to add the following code to a child theme. It’s supposed to call a custom post type template I made but every time I try it, I get a blanks screen and WordPress breaks:

function astra_body_classes( $classes ) {
	if ( ( ! is_active_sidebar( 'sidebar-2' ) )
		|| is_page_template( ‘page-templates/single-am_extra.php' )
	$classes[] = 'full-width';
	return $classes;
}

add_filter( 'body_class', 'astra_body_classes' );

Please help!

Thanks!

Nevermind, guys!

Solved it (with a bit of help) by using this code:

// Add specific CSS class by filter
add_filter( 'body_class', 'my_class_names' );
function my_class_names( $classes ) {
 if ( get_post_type() == 'am_extra' ) {
        if ( is_single() ) {
 // add 'class-name' to the $classes array
 $classes[] = 'full-width'; }
}
 // return the $classes array
 return $classes;
}

It adds the full width class only to single posts that use the “am_extra” template for my registered post type. I think it’s neat in that it’s short and won’t get wiped out if we ever get a new twenty fourteen version.

Cheers,

Luis

do you have to add this code only to your css file ?
is this all ?

do you mind sharing what needs to be done step by step ?
is it possible to install it like a plugin ?

I can’t program at all and would need to have a basically two columns.

One left for navigation, and then one on the right side.
That’s it.

thank you so much for any little help !