How to Create Custom Styles in WordPress Twenty Fifteen

By Lisa Sabin-Wilson

In the default Twenty Fifteen theme, have a look at the content.php template by clicking it on the Edit Themes page. At the top of the template (line 13, specifically) is this line of code:

<article id=“post-<?php the_ID(); ?>“ <?php post_class(); ?>>

The post_class(); section is the cool part of the template tag. This template tag tells WordPress to insert specific HTML markup in your template. This HTML markup allows you to use CSS to make custom styles for sticky posts, categories, tags, and post formats.

For example, you can set the following options for a post:

  • Stick this post to the front page

  • Filed in a WordPress category

  • Tagged with News

For the preceding example, WordPress inserts the following HTML markup:

<article class=“post sticky category-wordpress tag-news”>

Likewise, for post formats, if you publish a post using the Image post format, the post_class() tag in the template contains the following HTML markup, indicating that this post should be formatted for an image display:

<article class=“post type-post format-image”>

You can use CSS along with the post_class(); tag to provide custom styles for each of the post types, categories, and tags you’ve set up on your site.

Adding unique styles for your post formats starts with creating the content designations you want to display for each format. The possibilities are endless, and they’re all up to you.

In the following steps, you create a simple, stripped-down Main Index (index.php) file to use on your site and include post format support. This template is only a sample for you to follow and refer to when you create your custom display for your post formats. There’s no time like the present, so follow these steps:

  1. Open your favorite text editor, such as Notepad (PC) or TextEdit (Mac).

  2. Enter the code below to create a simple template for post formats.

  3. Save the file as index.php on your local computer.

  4. Upload the file into your theme folder (located in the /wp-content/themes/your-theme-name directory), replacing the existing index.php file.

<?php get_header(); ?> #1
<?php if (have_posts()) : ?> #2
<?php while (have_posts()) : the_post(); ?> #3
<div id=“post-<?php the_ID(); ?>“ <?php post_class(); ?>> #4
<?php #5
if ( has_post_format( ‘aside’ )) { #6
echo the_content(); #7
} #8
elseif ( has_post_format( ‘chat’ )) { #9
echo ‘<h3>‘; #10
echo the_title(); #11
echo ‘</h3>‘; #12
echo the_content(); #13
} #14
elseif ( has_post_format( ‘gallery’ )) { #15
echo ‘<h3>‘; #16
echo the_title(); #17
echo ‘</h3>‘; #18
echo the_content(); #19
} #20
elseif ( has_post_format( ‘image’ )) { #21
echo ‘<h3>‘; #22
echo the_title(); #23
echo ‘</h3>‘; #24
echo the_post_thumbnail(‘image-format’); #25
echo the_content(); #26
} #27
elseif ( has_post_format( ‘link’ )) { #28
echo ‘<h3>‘; #29
echo the_title(); #30
echo ‘</h3>‘; #31
echo the_content(); #32
} #33
elseif ( has_post_format( ‘quote’ )) { #34
echo the_content(); #35
} #36
elseif ( has_post_format( ‘status’ )) { #37
echo the_content(); #38
} #39
elseif ( has_post_format( ‘video’ )) { #40
echo ‘<h3>‘; #41
echo the_title(); #42
echo ‘</h3>‘; #43
echo the_content(); #44
} #45
elseif ( has_post_format( ‘audio’ )) { #46
echo ‘<h3>‘; #47
echo the_title(); #48
echo ‘</h3>‘; #49
echo the_content(); #50
} #51
else { #52
echo ‘<h3>‘; #53
echo the_title(); #54
echo ‘</h3>‘; #55
echo the_content(); #56
} #57
?> #58
</div> #59
<?php endwhile; else: ?> #60
<?php endif; ?> #61
<?php get_sidebar(); ?> #62
<?php get_footer(); ?> #63

Here’s a breakdown of the lines of cod:

Line 1: A function that includes all code from the header.php file of your theme.

Lines 2 and 3: Indicates the beginning of The Loop..

Line 4: Provides HTML and CSS markup using the post_class(); function that provides you with unique CSS classes for each of your different post formats.

Line 5: Initiates the start of a PHP function.

Lines 6–8: Provide content for the Aside post format.

Lines 9–14: Provide content for the Chat post format.

Lines 15–20: Provide content for the Gallery post format.

Lines 21–27: Provide content for the Image post format.

Lines 28–33: Provide content for the Link post format.

Lines 34–36: Provide content for the Quote post format.

Lines 37–39: Provide content for the Status post format.

Lines 40–45: Provide content for the Video post format.

Lines 46–51: Provide content for the Audio post format.

Lines 52–57: Provide content for all other Default posts.

Line 58: Ends the PHP function.

Line 59: Closes the HTML div tag that was opened in Step 4.

Lines 60 and 61: Close the endwhile and if statements that were opened in Lines 2 and 3.

Line 62: This function calls in the code included in the sidebar.php file of your theme.

Line 63: This function calls in the code included in the footer.php file of your theme.

This is a simple example and doesn’t include a lot of HTML markup or CSS classes. This is done intentionally so you can focus on the code bits that are required in order to designate and define different content displays for your post formats.

You can see that some formats contain the template tag to display the title — the_title(); — and that others do not. However, they all contain the template tag to display the content of the post: the_content();. You can play with different content types and markup that you want to add to your post formats.

Couple your template additions for post formats with the post_class(); that adds special CSS classes and markup for each post format type. You can truly customize the display of each individual post format to your heart’s content.