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:

Default Theme Customizations

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

Twenty Fifteen theme options
Available customization options for Twenty Fifteen.

Site Identity

This section of the customizer allows you to configure the Title and Tagline of your website, as well as a custom Logo. 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 this title and tagline 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 tagline on the left, and a regular text widget on the right.


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.

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 that shows it off well. 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.

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 & Social Links

From 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.

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

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
  • Email (mailto: links)
  • Facebook
  • Flickr
  • Foursquare
  • GitHub
  • Google+
  • Instagram
  • LinkedIn
  • Path
  • Pinterest
  • Pocket
  • Polldaddy
  • Reddit
  • RSS Feed (URLs with /feed/)
  • Spotify
  • Skype
  • StumbleUpon
  • Tumblr
  • Twitch
  • Twitter
  • Vimeo
  • WordPress
  • YouTube


You can add a variety of Widgets through the widget section. Navigate to Customizing > Widgets, then click on the blue plus + button, and choose from the available blocks.

Homepage Settings

You can choose whether you want your homepage to be your latest post, or a static page, and then select what those pages are from the dropdown menus.

Additional CSS

Here you can further customize the layout and appearance of your site by adding your own CSS code here. Click here to learn more about CSS.

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.

Use Any Font

Use Any Font plugin
Use Any Font plugin.

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 Use Any Font makes it possible.

Use Any Font gives you freedom to install custom fonts in your WordPress website. In fact, it allows you to use multiple fonts.

The plugin supports font formats including ttf, otf, woff, but you only need to upload the font in single format―any others required by browsers are converted automatically by the plugins font convertor. Not only is this more convenient, but it also improves your load times.

Use Any Font supports all major browsers, including IE, Edge, Firefox, Chrome, Safari, IOS, Android, Opera and more. You can use the uploaded custom fonts directly from WordPress Classic Editor, Gutenberg Editor, as well as a long list of other popular site builders.

This is an extremely powerful way of adding fonts to your theme without modifying the theme code.

Custom Twitter Feeds

Custom Twitter Feeds plugin
Custom Twitter Feeds plugin.

Adding a Twitter feed to your site is probably one of the best things you can do to get people interacting with you. The Custom Twitter Feeds Plugin is one of the best in this genre that I’ve come across.

You can display completely customizable, responsive, and search engine crawlable Twitter feeds on your website–on any page, in the sidebar, or in a widget.

The Custom Twitter Feeds plugin will display Tweets that completely match the look and feel of your site, and includes tons of customization options. Easy setup includes Configure, Customize, Style, & Display, and Support is built-in. Click here for step-by-step instructions on setting it up.


Jetpack plugin banner
Jetpack plugin.

With a download count well over 14 million, Jetpack is one of the most popular plugins available. It is made by the brain trust 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.

Jetpack has many additional useful features, including site security, speed & performance, and site stats. Design tools and integrations with top WordPress plugins/tech products are also part of the package.

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.

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 Jetpack 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.

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.

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.


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―truly making it your own.

Editor’s Note: This post has been updated for accuracy and relevancy.
[Originally Published: January 2015/ Revised: March 2022]

Have you made any of these customizations to Twenty Fifteen? Let us know how you've tweaked this theme in the comments below.
Daniel Pataki
Daniel Pataki Hello, I'm Daniel and I make things for the web. I'm the CTO at Kinsta and I write for a number of amazing publications like WPMU DEV and Smashing Magazine. In my spare time you'll find me playing board games or planning the next amazing office game like the not-at-all-destructive Megaball.
Janette Burhans
Janette Burhans Janette is a wily wordsmith and impassioned illustrator who does her best work surrounded by pink, sparkly things. Aside from creating articles and art, she treasures time with family (human & furry), reading or watching stories, and long walks down the makeup aisle. She is happy to share her thoughts and feelings, but draws the line at ice cream.