How to Customize Twenty Fifteen to Make it Your Own

How to Customize Twenty Fifteen to Make it Your Own

I recently praised the new Twenty Fifteen default WordPress theme for its clean look and focus on sharing beautiful content.

I like its vertical rhythm, the layout of the sidebar and the responsive behavior. It really is a beautiful theme.

But while I love how it looks, there’s always room to make it your own. Twenty Fifteen offers a few customization options but there is a lot more you may want to do to style it to your liking.

In this post I’ll take a look at a number of ways you can turn an already awesome theme into a site design that’s just right for you. We look at the built-in customization options, some plugins to add further style improvement, and self-coded solutions to some problems problems, albeit minor ones.

During the course of this article we are going to explore:

  1. Default Customizations
    • Colors
    • Background images for the main content and sidebar
    • Using the social menu
  2. Plugins
    • Adding support for Google Fonts
    • Adding a Twitter feed to the sidebar
    • Adding support for tiled galleries, sharing links and more
  3. Coded Solutions
    • Switching the sidebar to the right
    • Adding an image credit below posts
    • Removing the author section below posts
    • Modifying the color of content boxes

Default Theme Customizations

The main place to go is the Appearance > Customize section in the admin. This should bring up the Theme Customizer with the following options:

Customizing Twenty Fifteen
Available customization sections for Twenty Fifteen

Site Title and Tagline

This section of the customizer allows you to configure the title and subtitle of your website. This is standard functionality for almost any theme.

In addition, you may choose (via a checkbox) to disable this completely. This is pretty helpful if you want to add a header graphic with your logo via a child theme.

I’ve found that in this the the title and subtitle can be used pretty well for a quick bio as well. I prefer it over using a widget.

Two types of Intro
Difference between the title and subtitle and a widget.

The screenshot above shows the title and subtitle on the left and a regular text widget on the right. That’s as big as the heading gets in the widget, but disappointingly of all the widget cannot be placed above the menu – right at the top of the page, which is how I wanted it to be.

Colors

The colors section gives you access to the most visible customization options – changing your colors. There are four settings:

  • Base Color Scheme: Allows you to choose a color preset for your content and sidebar.
  • Background Color: Sets the background color for the main content area. The content boxes will retain their original colors.
  • Header and Sidebar Text Color: Sets the text color for the header and the sidebar. The sidebar becomes the header on smaller screens.
  • Header and Sidebar Background Color: Sets the background color for the sidebar/header area.
Color variations
Some color variations.

Header and Background Images

These two sections contain one setting each that governs the background image for the sidebar and the content area respectively. Even if you will be using an image here make sure to set a background color which looks good. If something goes wrong and your image doesn’t load your readers will still see something visually pleasing.

Background image
Background images set for the sidebar and content.

In case you’re wondering, there is no way to have a single background image span all the way across and have the sidebar black with some opacity. The screenshot above kind of looks like that but it’s actually two images.

Navigation, Widgets and Front Page

The navigation section allows you to assign your menus to the two menu locations available within the theme. There’s a regular page menu named “Primary Menu” and a social menu named “Social Links Menu” available. We’ll take a look at these in a bit more detail later, assigning them from within the Menus section.

If you haven’t tried the widgets managed in the customizer yet this is the perfect opportunity to do so. It was overhauled in WordPress 3.9 and is much more usable than before. You can create and preview widgets right from the customizer – a superb feature.

With the Static Front Page section you can select a previously created page to use as your front page. Use this if you would like to show something else than your latest posts on the front page.

Customizing Menus and Social Links

Menus in Twenty Fifteen
An example of a regular menu and a social link menu.

If you head on over to Appearance > Menus you can assemble menus for yourself. There is nothing new here. If you would like to learn how this works take a look at the WordPress Menu User Guide.

Twenty Fifteen does offer an added feature, the option to create a social icon menu with links to your favorite services:

When creating a social menu you should create a regular menu and link to a supported site. You don’t need to worry about what you name the menu item, the correct icon will be used based on the link provided.

The following is the full list of available social sites you can link to:

  • CodePen
  • Digg
  • Dribbble
  • Dropbox
  • Facebook
  • Flickr
  • GitHub
  • Google+
  • Instagram
  • LinkedIn
  • Path
  • Pinterest
  • Pocket
  • Polldaddy
  • Reddit
  • Skype
  • StumbleUpon
  • Tumblr
  • Twitter
  • Vimeo
  • WordPress
  • YouTube

Useful Plugins

If the default customizations aren’t enough to tailor Twenty Fifteen to your liking, here are a few plugins that offer additional styling options.

  • Adding Support for Google Fonts

    Twenty Fifteen uses Noto Serif and Noto Sans, two great fonts available from Google Fonts.

    Regretfully, there is no built-in way to customize the font family, however a plugin named Typecase solves all that. WP Tavern explains in detail how the process works.

    Once you download and install Typecase you will be able to select a number of fonts you want to make available to the theme customizer. Next, visit the Theme Customizer and use the options to set the fonts to use for the body copy and headings.

    Typecase also allows you to add custom selectors to tailor your fonts to specific elements. This is an extremely powerful way of adding fonts to themes without modifying the themes themselves.

    Interested in Adding Support for Google Fonts?

  • Adding a Twitter Feed

    Adding a Twitter feed to the sidebar is probably one of the best things you can do to get people interacting with you. I recently stumbled upon the rather lengthily named Easy Twitter Feed Widget Plugin, which is one of the best I’ve used so far.

    Setup is as easy as pasting a widget ID, and it allows you to extensively customize the look of the feed.

    Interested in Adding a Twitter Feed?

  • Tiled Galleries, Sharing Links And More

    With a download count nearing 14 million, Jetpack is one of the most popular plugins available. It is made by our friends at Automattic and includes a huge number of features which can be turned on or off selectively.

    Tiled galleries are one such feature I like, creating a masonry style gallery from your gallery shortcodes automatically. The beauty of this is that you don’t need to do anything special when inserting your galleries, just turn the feature on.

    Another often used module is the sharing section which can be added to the bottom of posts automatically. Here is how it looks in Twenty Fifteen:

    Sharing

    Interested in Tiled Galleries, Sharing Links And More?

Customizing Twenty Fifteen With Code

Before we get stuck into customizing the theme, we should create a child theme.

This is extremely easy, but if you’re not sure how to do it check out our handy guide to child themes. Child themes allow you to modify an existing theme without touching its code. This enables you to update the parent theme without losing your changes.

Once you have created your child theme you’re ready to start implementing some custom changes.

Moving The Sidebar To The Right

What’s the Problem?

There’s no option to switch the sidebar to the right side of the page if you prefer it that way.

How to Fix It?

To move the sidebar to the right you’ll need to add only a couple of styles to the style.css file in your child theme.

The Solution

Here’s the full code, explanation ensues:

So how do I know to do it like this? I simply used Chrome Developer Tools to figure out what the styles are. Hit Shift + Command + C to bring up the menu and hover over the sidebar (in OS X). The sidebar (.sidebar) has some rules which push it to the left by default. The main content area (.site-content) has rules which push it to the left.

I reversed these rules, taking care to overwrite them properly. Take care when doing this because some rules need to be set to their default. For example: when changing a float you can simply say float:right. Since this is defined as left originally the rule is overwritten. However, if a rule is set as margin-left:20px; you are not rewriting it by defining margin-right:20px in the child theme.

You are saying that the element should have a 20px right margin in addition to having a left margin. In these cases you should write: margin-left:auto; margin-right:20px;. This is pretty obvious when you’re writing out all the rules, but I sometimes make this mistake when overwriting rules and I spend a bit of time figuring out what’s wrong!

The last piece of the puzzle is to make sure the background separator lines up with our new layout. The separator is added using the ::before pseudo-selector. By making sure the position of this element is fixed to the right instead of the left we’ve completed our sidebar change.

Make sure to wrap the code in a media query. We only want to apply these styles to large screens. On smaller screens the sidebar should still become the header. By default this happens on small desktop screens, at 955px, or 59.6875em.

Adding An Image Credit Below Posts

What’s the Problem?

I like to say who is responsible if I use an image from around the web but there’s no option to add image credits in Twenty Fifteen.

How to Fix It?

Use Advanced Custom Fields and place the information in your template via a child theme. I’ll give you a rundown of how I did this on my website, but for more informal about this take a look at Creating A Workout Diary With WordPress to see how it works.

The Solution

In Advanced Custom Fields I created a WYSIWYG text field, which is shown on every post edit page. I could have made it a URL field but that would have limited me on the front end.

By using a text field I am free to write a sentence or two about the image if I like.

ACF image credit.
The image credit field I created in ACF.

At this point you can add image credits to all your posts but they won’t show up on the front-end. Open up your functions.php file and let’s use a hook to tack this info on after the post content:

This code takes the original content of the post and returns it after adding a our image credit string to it. Notice that I’ve used a specific HTML format:

My reason for doing so was that Jetpack uses the same structure to output some of its content, like the sharer section. I wanted it to mimic this so I used the same HTML. Before testing it out, head into your style.css to tweak the look a bit. Use the following to make it look just like it would if it were a Jetpack module:

Note that at the very end I modify the font size of all sections which use the .after-post-section .section-content selector. You may want to remove this if you’d like the text to be a bit bigger.

Image credit.
The image credit and the Jetcpack sharer

Removing the Author Section

What’s the Problem?

An author bio is displayed at the bottom of every post, which looks great, but if you have a single author website it’s completely unnecessary since your information will likely be displayed in the sidebar.

How to Fix It?

You can do this two ways: You can use the stylesheet to simply remove it from view, or you can remove the functionality altogether.

The Solution

To remove it from view go to your style.css file and add the following: .author-info { display:none; }. If you choose this method the text will still be there but it will be hidden from view.

If you would like to prevent content from loading when it isn’t needed you can remove it altogether, HTML and all. To do this you will need to copy and paste the content.php file from the parent theme into your child theme.

Open the file up and look for a section which starts with // Author Bio. Delete everything from the starting PHP tag to the ending PHP tag. Here is the full code which needs to be removed:

Changing Content Box Colors

What’s the Problem?

The Theme Customizer doesn’t allow you to change the color of content boxes.

How to Fix It?

You can change the color of the content boxes (and the text within them) to make some more interesting patterns. You will only need to modify styles so everything can be written in your child theme stylesheet.

Box color
A custom colored box in Twenty Fifteen.

The Solution

To achieve the effect seen in the screenshot above I had to change a few styles. Changing the background and the text color of the box is not enough because links and other elements may override them.

If you’d like to get the exact same design as above use #000000 for the content background and #303030 for the sidebar background in the theme customizer. Take care as some items within the post content may override these styles. You can already see an example in the screenshot – the pre tag. This looks OK in the design but other elements may override, with less pleasing results. If this is the case, simply add a new rule to your stylesheet to use your own colors.

Creating Borderless Boxes

What’s the Problem?

In some cases you may want to create borderless boxes, for a slider for example. Take a look at the screenshot below to understand the issue better.

Slider
A borderless and a regular post one under another.

How to Fix It?

We could set one of the post formats to be borderless, but I would prefer to leave them as is, the design is great. Besides, I may want to show images inside boxes with borders and borderless boxes as well.

The solution I came up with involves Advanced Custom Fields yet again. I created a true/false type control, which is output for each post’s edit screen. This allows me to set whether I want a particular post to be borderless or not.

Borderless
The borderless control is just under the previously discussed image credit area.

The Solution

We’ll detect the state of this box whenever a post is loaded and output a special class if it is ticket. This can be done by hooking a function into the post_class hook:

We use the get_field function to see if the borderless box is ticked. If it is, we add it to the array of classes which will be added to the post. From here on out it’s largely subjective what you want to do. You can remove the border but keep the meta box, remove the meta box altogether, etc. I opted to remove everything:

By the way, if you would like to add a permanent slider to the top of your homepage, this is the perfect way to do it. All you need to do is add a slider as the post content and mark the post as sticky. In my demo I used the Meta Slider plugin to create the slider.

Conclusion

As you can see, there are numerous ways to customize Twenty Fifteen to make it just right for you. The built-in customization gives you control over some basic settings, while plugins can do a lot to extend what is already an awesome theme.

If you need more fundamental changes almost anything can be achieved via a child theme. You can remove elements, add your own and customize the style of everything in a modular way.

If you would like to see some other customizations of Twenty Fifteen or you have tweaked the theme yourself, let us know in the comments below.