Tag Archives: Themes

How to change fonts in TwentyFifteen by Automattic

TwentyFifteen uses the Noto Serif font. It looks swish and comes with an Apache license, and it can be pulled from Google Fonts too. It’s a fine font indeed – but individuals that we are, it may not be for everybody.

It’s easy to change it to something else though, and in this article I’ll show you how.

By default, TwentyFifteen and Noto Serif looks like this:

Screen Shot 2015-11-05 at 11.58.15

If we want to change this to something else, we must first import said font into our style sheet, and then declare it for a couple of classes. In this example I’m going to use Lato, another fabulous font that’s featured in the TwentyFourteen theme:

Now TwentyFifteen will look like this:

Screen Shot 2015-11-05 at 11.59.27

If for some reason Lato cannot be downloaded, the browser will try to display text in the next font we declared (Georgia – and if that fails, it’ll try Times New Roman… you get the picture).

How to avoid hyphenations in TwentyFifteen by Automattic

By default, TwentyFifteen will hyphenate text on posts and pages. This works well for most, but some find this feature annoying. It’s easy to override with a small CSS tweak – let me show you how.

Here’s what a post might look like by default:

Screen Shot 2015-11-05 at 11.39.53

Notice the hyphenations in lines 3 and 4. Now add the following to your stylesheet:

Now the post should look like this – no more hyphens in sight:

Screen Shot 2015-11-05 at 11.40.14

And in case you ever want to bring it back, delete the above, or set them to their default values:

Under the hood, CSS uses two distinct properties: hyphens and word-wrap. However, not all browsers acknowledge each property – and with the above we’ll target most common browsers in use today.

Check out the following links for more information on the hyphens and word-wrap properties:

  • https://css-tricks.com/almanac/properties/h/hyphenate/
  • https://css-tricks.com/almanac/properties/w/word-break/

How to style captions in Twentythirteen

I love the Twentythirteen theme – except for the captions that appear underneath images. If you’ve ever seen them they look so out of place as if someone forgot to style them altogether. Here’s what they look like by default:

Screen Shot 2014-04-14 at 10.47.48

Notice how the captions are actually larger than the post text. I wanted to drop this size a bit, but at the same time integrate the text better with images I post over at http://www.versluis.com, adding a bit of padding, some rounded corners and perhaps tint the background colour ever so slightly.

Here’s what I came up with:

Screen Shot 2014-04-14 at 10.47.08

And here’s how I did it:

Add this to your theme’s style.css file or override your stylesheet with an appropriate option. Here’s what this code does:

First we’ll reduce the 18 point caption size and bring it in line with the rest of the post text (1em). Then we’ll tint the background colour to a very light hint of grey. We’ll also add a bit of padding around all edges of the text, it looked a bit cramped in there before.

The second larger block is creating rounded corners at the bottom of the caption, but not at the top so it looks like an attachment. There’s a remarkable tool that lets you visually set this and return some code at http://border-radius.com – go check it out and have a play.

How to link to graphic assets within WordPress Themes

When you’re displaying graphics that are served from your own theme directory, hard coding is never a good idea. In fact it’s impossible because you don’t know your user’s URL.

There are a couple of built-in WordPress functions that can help us here. One of them is called get_stylesheet_directory_uri which returns the URL to your theme or child theme.

Here’s an example. Say you’d like to display the following file:

then you’d write this in PHP like so:

This will work for both themes and child themes. If you are using a child theme and you’d like to explicitly call a file in the parent theme’s directory you can use get_template_directory_uri like so:

Those options are great if you need the link, but what if you’re writing some PHP code and need the full server path to those files instead? Fear not, WordPress has functions for those situations as well – and they’re called the same thing, just without the _uri at the end (get_stylesheet_directory and get_template_directory respectively).

  • http://codex.wordpress.org/Function_Reference/get_stylesheet_directory_uri
  • http://codex.wordpress.org/Function_Reference/get_stylesheet_directory
  • http://codex.wordpress.org/Function_Reference/get_template_directory_uri
  • http://codex.wordpress.org/Function_Reference/get_template_directory

What is a Favicon?

Its this tiny little graphic that gets displayed in your browser when you’re visiting certain websites (left of the URL).

Technically it’s a file called “favicon.ico” in the root directory of your installation. It’s a 16×16 pixel graphic in either ICO, JPG or PNG format. For details, check Wikipedia’s excellent article:

If you’d like to add one to your own site, perhaps this article is useful to you:

How to shorten the_content() in WordPress Themes

If you’ve ever created a WordPress Theme and you’re not happy with the way it outputs text to your theme, you might be interested in a handy plugin called the_excerpt_reloaded(). You can

  • shorten the number of words being printed to screen
  • you can add a handy “Read More” or whatever link
  • allow or disallow certain HTML tags (nice!)
  • and quite a bit more.

Have a look at

the_excerpt_reloaded can replace any of the traditional WordPress Functions and do a lot more.

  • the_content()
  • the_excerpt()
  • the_content_rss() (depreciated and unreliable in WP version 2.7)
  • the_excerpt_rss()

Happy Theming!

How to add a NEW THEME to your site

One of the most amazing things about WordPress is that you can select a completely new layout for your site at the touch of a button. It’s just as easy to upload a new theme to your library – try it out for yourself.

Here’s what you do:

  • download and un-zip your theme, so you end up with (usually) a folder of the theme’s name
  • use an FTP client (like Filezilla) to access your webspace
  • find a directory called wp-content/themes
  • upload your entire un-zipped folder into this folder
  • log into your WordPress Site (usually at www.example.com/wp-admin)
  • navigate to APPEARANCE – THEMES
  • find your theme and activate it
  • sit back and enjoy your site in a new layout

You can find plenty of free and commercial themes around the net if you google WordPress Themes.

I’ve put together a list of good sites here.