WordPress.org

Codex

Attention Interested in functions, hooks, classes, or methods? Check out the new WordPress Code Reference!

Twenty Fifteen


Twenty Fifteen is the default theme for WordPress in 2015. It is super-clean, content-focused, and designed to bring a little more simplicity to our blogs. Its careful attention to typography, featuring the expertly-designed Noto font set in elegant and harmonious margins, makes it beautiful in multiple languages around the world.

Twenty Fifteen looks great on devices of all sizes, from desktop to mobile and everything in between. The theme adapts to any screen without sacrificing usability or design integrity.

Responsive Twenty Fifteen.png


Quick Specs (all measurements in pixels)

  1. The main content width is 660px.
  2. The sidebar width is 248px.
  3. Featured Images are 825px wide by 510px high.

There are a few ways that you can customize Twenty Fifteen, all from WordPress' Customizer. This short guide will show you how to:

  • choose a featured color scheme
  • add descriptions to your menus
  • add social icons in your menu

Choose a Featured Color Scheme

Twenty Fifteen has six color schemes you can use to change the look of your blog. The Default color scheme is a light gray, but you can also choose from Dark, Yellow, Pink, Purple, and Blue.

Twenty Fifteen Colors.png

To choose your color scheme, go to Appearance > Customize.

Under "Colors", select your preferred color scheme from the drop down:

Twenty Fifteen Customize Color Schemes.png

You'll see the color scheme change in the preview pane to the right.

When you're done, click Save and Publish.

Add Menu Descriptions

Twenty Fifteen has a menu design that’s easy to navigate, especially when you add menu descriptions.

Twenty Fifteen Menu.png

To start adding descriptions to your menus, go to Appearance > Menus and click the Screen Options tab in the upper right of the screen.

In the "Show advanced menu properties" section, check the box next to Description.

Twenty Fifteen Screen Options.png

Now you can begin adding descriptions to any link in a menu.

Twenty Fifteen Menu Descriptions.png

When you're done, click Save Menu.

Add Social Icons

Twenty Fifteen also allows you to display links to your social media profiles with crisp, perfectly-sized icons.

You can see these icons at the bottom of the menu displayed in the previous section.

The first step is to go to Appearance > Menus and create a new menu - you can name your menu anything you like.

You will then add the URL for each social profile to your menu as a custom link.

When you have added all desired links, click Save Menu.

Now that you have created your menu and added your social links, go to the Manage Locations tab and next to "Social Links Menu", select the social icons menu you just created from the drop down.

Twenty Fifteen Social Icons Manage Menu.png

Click Save Changes when you’re done.

Available icons

Linking to any of the following sites will automatically display its icon in your menu:

  • 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

What else can you do?

You can also use the Customizer to make the following changes to your website:

  • Change your Custom Header image
  • Featured Images: works best with images that are 825px wide by 510px high
  • Change the background image or color
  • Set a static front page

Links