Tag: Twenty Fourteen Theme

This tutorial enables you to do add the Twitter Bootstrap column classes to Twenty Fourteen to display your posts in columns on any archive pages.

There’s 2 steps involved:

1. You need to add the Twitter Bootstrap CSS to your child themes style.css file
2. And then add the PHP code with the post class filter to your child themes functions file

Twitter Bootstrap Column Classes

Here’s the code for displaying your posts in 2 or 3 columns.

Archive Posts In 2 Columns

Here’s the result on a category page using Twenty Fourteen

Archive Posts In 3 Columns

Here’s the result on a category page using Twenty Fourteen

You will also need to add a tiny bit of CSS to your style sheet to fix the pagination styling:

.archive .paging-navigation {
	border-top: 5px solid transparent;
	margin: 48px 0;
}

Mobile Responsive?

Gulp! No. This solution is NOT mobile responsive unless you add Media Queries to re-size the CSS columns on smaller screens.

The easiest solution is to use the CSS for the Media Queries from any Responsive StudioPress Pro theme which uses the exact same column classes from Twitter Bootstrap. Then its simply a copy and paste job.

Otherwise, you can write the CSS yourself.

More of the Same

• Display Posts In Columns On Genesis Archive Pages

By default, the Twenty Fourteen default theme for WordPress displays full content on all archives except on search results pages.

You can change this using 1 of 2 methods:

1. You can remove the_content tag from the content.php file leaving the excerpt
2. Or you can control the content limit by adding a custom function to filter the_content in your child themes functions file.

On top of this, i’ll also show you how to add a read more link after the excerpt and also after the content limit if you choose that solution.

Note: Its advisable to create a child theme to protect your modifications from being lost when the Twenty Fourteen parent theme updates.

1. Modify content.php File

The 1st solution requires you to copy over your content.php file to your child theme and change this line of the code on line 47 from this:

To this:

Now all your archive pages including your home, category, blog, tag and author archive pages will display the excerpt rather than the full content of each post.

You can then add your read more link using code like this in your child themes functions file:

And here’s an example of what your archives may look like using this method:

2. Filter the_content

The 2nd solution simply requires you to copy the PHP code from the view raw link in this Gist and paste it at the end of your child themes functions file.

Alternatively, you can use this code snippet if you want to add a read more link after the content.

And here’s an example of what your archives can look like using the 2nd method:

Note: Only use one of these 2 snippets and change or remove the conditional tag to suit your needs as this code only effects the home page and not other archive pages.

In this tutorial, i’ll provide 2 of the best ways to add your logo image to your site title area of your header.

1. The 1st method involves a few lines of CSS code
2. The 2nd method involves editing PHP code

1. CSS Method

The 1st method is the easiest and involves 2 simple steps:

(i) Add this CSS code to your child themes style.css file.

.site-header {
    background-image: url('images/your-logo.png');
    background-repeat:no-repeat;
}

(ii) upload your logo image to your child themes images folder making sure the file name and extension match whats in the CSS code.

And here’s the result when using the 1st method:

2. PHP Method

The 2nd method shows you how to replace the site title with your logo image.

There’s 2 steps involved:

1. Create a child theme and copy your header.php file over
2. Modify the code in the header.php file to include your logo image pulled from your child themes images folder.

1st step is to copy over your header.php file from the parent theme to a child theme so the changes you make to the code will be saved when the parent theme is updated.

After you have created a child theme for Twenty Fourteen and copied over the header.php file, go to Line 45 in your header.php file and change this line:

<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>

To this:

<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><div class="your-logo"><img src="<?php echo get_stylesheet_directory_uri(); ?> /images/your-logo.jpg" /></div></a></h1>

Then simply upload your logo to your child themes images folder making sure it matches the path, file name and extension which is the same as whats in the above code.

Here’s an example:

The Twenty Fourteen default theme for WordPress includes a search.php file which includes several template tags.

Here’s the default search page which includes the featured image and entry meta.

If you want to customize what displays on your search results pages, you will need to copy over the search.php file to a child theme.

Inside the search.php file you’ll find a loop which includes this template tag:

get_template_part( 'content', get_post_format() );

To modify what the content.php file does in your search results loop, copy over the content.php file to your child theme and rename it to something like customsearch.php.

Then change the above line of code to:

get_template_part( 'customsearch' );

Now you can modify the code in your customsearch.php file to customize the functionality of your search results page and even style it differently to the default.

The Code

Here’s the code for the 2 files you need to create in your child themes root directory.

Example of Customized Search Page

Here’s a very basic example of how you can customize your search results page using the Twenty Fourteen theme.

Here’s what the above code produces:

Related Tutorials

• Genesis Custom Search Results Page
• HTML 5 Custom Search Form for Custom Post Type

There’s at least 2 ways to do remove featured images from the home page ( Post Page in Reading Settings ) of the Twenty Fourteen default theme for WordPress.

All code changes should be made in a child theme.

Note: Use the 2nd method if using Post Formats as the Twenty Fourteen parent theme contains a separate content.php file for each post format.

1. In the content.php file around Line 14 change this line

<?php twentyfourteen_post_thumbnail(); ?>

To this:

<?php if ( ! is_home() ) twentyfourteen_post_thumbnail(); ?>

You should copy over the file to a child theme before making the modifications.

2. Or around line 172 of the twentyfourteen > inc > template-tags.php file you could add the is_home() conditional tag so its like this:

function twentyfourteen_post_thumbnail() {
    	if ( post_password_required() || is_attachment() || is_home() || ! has_post_thumbnail() ) {
    		return;
    	}

And here’s a basic example of the home page without featured images.

3. You could also add this CSS code to your child themes style.css file.

.home .post-thumbnail img {
    display: none;
}