Categories
WordPress Themes

Twenty Fourteen – Filter The Post Class With Column Classes On Archives

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

2 columns twenty-fourteen

Archive Posts In 3 Columns

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

3 columns 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

Categories
WordPress Themes

Twenty Fourteen Theme: 2 Ways To Display Excerpts or Limit The Content

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:

content limit read more link

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:

content read more link

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.

Categories
WordPress Themes

Twenty Fourteen: 2 Ways To Add A Logo Image To Your Site Title Header Area

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:

header logo css

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:

logo in header of twenty fourteen child  theme

Categories
WordPress Themes

Twenty Fourteen Theme: Custom Search Results Page

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.

default search

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:

custom search page

Related Tutorials

Categories
WordPress Themes

Twenty Fourteen: 3 Ways to Remove Featured Images From Home Page

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.

Twenty Fourteen with featured image

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.

remove featured image from twenty fourteen theme

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

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

Twenty Fourteen Theme: Add Comment Bubble To Comment Reply Link

In this tutorial, i’ll provide the CSS code which enables you to add a comment bubble to the comment link in the post meta of the Twenty Fourteen theme like this:

2014 comment bubble

There’s a few simple steps you need to follow:

  • Create a child theme and copy over the content.php file which needs modifying.
  • Add CSS to your child themes style.css file.
  • Add comment bubble image to your child themes images folder.

The Code

This Gist includes 2 blocks of code.

The 1st block of code consists of the entire code for the content.php file which has been slightly modified. Basically all i have done is remove the Comment and Comments text so only the comment count number appears in the bubble.

This file should be added to a child theme for Twenty Fourteen.

The 2nd code block is all CSS and can be pasted into a style.css file in your child theme.

The Comment Bubble Image

Here’s an image you can open up using your favorite graphic design tool like Photoshop, Paint.net or GIMP and change the background color to match your site.

blue-comment-comment

The file name and extension needs to match whats in the CSS code and you can change the position by modifying the values for the right and top.

The 2nd bubble displays the hover color.

These values are currently set to:

right: -10px;
top: -12px;

Hope you like my tutorial on how to add a comment bubble to a Twenty Fourteen child theme.

Please ask any questions you like in the comments as i’m always happy to engage with you.

More Posts Featuring Comment Bubbles

Categories
Genesis Tutorials

Twenty Fourteen Theme: Show Only Post Titles On Archive Pages

This question was asked on the forums recently which i’ll answer with one solution i think is the best:

I’m using the Twenty Fourteen theme and think it’s stupid to show full posts in the Archives section. I want just the titles to be displayed for easier navigation. Even removing the dates would be nice. (I’ve already done so for individual posts but the Archives section still says May 2014.) This is minor though. The main thing I’d like to know is how to only display the title.

I’ve looked at the archive.php file (included below) but don’t know php and have no idea what to do. The advice I’ve found using Google is outdated and the code samples don’t match mine. Please o’ gracious lords of the internet, tell me what needs to be changed so my site can suck a little less.

Here’s what my solution produces:

titles only

1. Create a child theme for Twenty Fourteen

The first step is to create a child theme which we’ll use to copy over files from the parent them in order to avoid losing the changes when the parent theme updates.

2. Copy Files From Parent to Child Theme

Copy over the content.php file and the category.php file if you only want to display post entry titles on all category archives.

If you also want to display post titles only on other archives like author and tag archive pages, copy over those files as well.

3. Modify File Names & Code

Rename the content.php file to content-titles.php and then remove all the code in the file leaving only whats needed to display your entry titles. Here’s the result showing the screenshot from my local installation, followed by the code.

post titles only twenty fourteen category archive page

And here’s the code for your content-titles.php file.

4. Edit Get Template Part Name In Files

The final step is to open your category.php file which you copied over to your child theme and find this line of code:

get_template_part( 'content', get_post_format() );

And change it to this:

get_template_part( 'content', 'titles' );

You can read more about get_template_part on the WordPress.org Codex however what it basically does is include the file named content-titles.php in the file you include it in which in this case is the category.php archive page template.

Titles Only On Other Archives

Simply change the get_template_part() name to in any other archive type files you copy over to your child theme and they will also only display the post entry titles.

get_template_part( 'content', 'titles' );

Got a better solution for showing post titles only on archive pages in the Twenty Fourteen theme?

If you’re interested in learning more about why Genesis is the most popular premium theme framework, click the link below in the related posts to see how its done in StudioPress themes. Far cleaner, easier and faster in my opinion.

Related Posts

Categories
Genesis Tutorials

Add Default Header Image To Twenty Fourteen Child Theme

This code simply pulls an image named header.jpg from your child themes images folder.

default header twenty twelve theme

Copy the PHP code from the view raw link in the GIst and paste it at the end of your child themes functions.php file.

You can still add a custom header image under Appearance > Header if you want to change the default.

Change Header Image Size

You’ll find all the CSS code for styling and changing the size of your header image once uploaded, under the Header section of the parent themes style.css file.

Here’s some sample CSS i have tested which you can add in your child themes style.css file:

#site-header {
	position: relative;
	z-index: 3;
	max-width: 630px;
	min-height: 175px;
}

And here’s the result:

change header image size twenty fourteen theme

The max width is 1260px and the height is flexible.

Note: If you change the header image size, you may also need to change the CSS for the Media Queries which you can find near the end of your style sheet.

Categories
Genesis Tutorials

Twenty Fourteen Theme: Modify Post Meta Date Time & Author Byline

Unlike StudioPress child themes, there’s no post meta filter to help you modify the post info data like author name, time and date in the Twenty Fourteen default theme.

post meta

Rather than modify the parent themes code which will be lost when you update the theme, you can copy the function to a child themes functions.php file and make the changes there.

Here’s the code for the post meta data which comes from Line 100 of the inc/template-tags.php file:

Now you can easily customize the:

  • entry time
  • entry date
  • author meta