What Valentines Want

What Valentines Want

Explore more infographics like this one on the web’s largest information design community – Visually.

How to: Change post title capitalization in Twenty Fourteen theme

Right now, I use the Twenty Fourteen theme on this WordPress blog and it works just great!

Like many other themes, while the default layout works good for majority of the blogs, there might be a thing or two that needs tweaking. For me, the post title capitalization was one such aspect.

Here is the CSS that displays the title. By default, it transforms the complete post title text to ‘ALL CAPITALS’ (uppercase).

.entry-title {
 font-size: 33px;
 font-weight: 300;
 line-height: 1.0909090909;
 margin-bottom: 12px;
 margin: 0 0 12px;
 text-transform: uppercase;
 }

You need to pick your preference and adjust the value for the text-transform: property here. These are the values available.

Value Description
none No capitalization. The text renders as it is. This is default
capitalize Transforms the first character of each word to uppercase
uppercase Transforms all characters to uppercase
lowercase Transforms all characters to lowercase
inherit Specifies that the value of the text-transform property should be inherited from the parent element

Where to change this?

  1. If you have a child theme, edit style.css file in that theme. (or)
  2. In the Admin area, go to Appearance -> Edit CSS and paste the custom code with your preference. (or)
  3. [Not recommended] Edit the style.css of Twenty Fourteen theme directly.

How to: Create a child theme for Twenty Fourteen

If you’ve created a child theme for any WordPress theme before, it’s very similar for Twenty Fourteen as well.

If you’re in hurry, download the Twenty Fourteen Child theme right away.

Download Twenty Fourteen Child Theme.

Download, unzip and upload it to your “/wp-content/themes/” folder.

However, if you got a min, please read through and create your own. It’s easy, really! 🙂

What is a child theme?

A WordPress theme that adds more functionality to the existing theme on your site. Read more on WordPress Codex.

Why create a child theme?

So that we can tweak the main theme without actually editing it. When there is an update to the main theme/ parent theme, the child theme will still hold your customizations.

Why not edit the main theme files?

Because the custom changes will be lost when the main theme is upgraded. In our case, as we are talking about Twenty Fourteen, the theme is relatively new and may see few updates as we go along. We don’t want to customize the site and tweak the look and feel or functionality every time there’s an update!

Creating your own child theme

It’s really easy and takes less than 10 minutes!

  1. You will need access to your website via either FTP or your hosting provider’s file manager application.
  2. Navigate to “/wp-content/themes/” directory.
  3. You should see twentyfourteen as a directory. This holds all your Twenty Fourteen theme files.
  4. Create a new directory at the same level, that will hold your child theme files. I recommend twentyfourteen-child as is normal practice.
  5. Inside this folder, you need to add the one and only file that is required to create a valid child theme – style.css.
  6. Add the following lines to the style.css file.
    /*
    Theme Name: Twenty Fourteen Child Theme
    Theme URI: http: //mysite.com/
    Description: This is a custom child theme I have created.
    Author: My Name
    Author URI: http: //mysite.com/
    Template: twentyfourteen
    Version: 0.1
    */
    
    @import url("../twentyfourteen/style.css");
  7. Obviously all the information above is generic and can be changed, except Template: twentyfourteen. This variable is required in order to tell your child theme which parent theme it is related to, and must hold the folder name of your active theme.
  8. Also, don’t change the name of the parent theme in @import url("../twentyfourteen/style.css");.
    This calls the parent theme’s CSS file within your child theme’s style.css file.
  9. Navigate to “Appearance > Themes” in your WordPress admin area and activate the child theme.

Any additions to your child theme’s style.css will have an effect upon your site. And as intended, any future update to the Twenty Fourteen theme will not affect your child theme’s style.css file.

I’ve created the folder and the basic style.css file if you want to use it.

Download Twenty Fourteen Child Theme.

Download, unzip and upload it to your “/wp-content/themes/” folder.

If you want to make a change to a specific PHP file in your parent theme, just make a copy of it, and paste that copy into your child theme’s directory. Any changes you make will go live.

However, when editing the PHP file, make sure that the directory structure in your child theme should match that of the parent theme’s. So if you decide to edit a PHP file in “/twentyfourteen/inc/widgets.php”, you should place it in ”/twentyfourteen-child/inc/widgets.php”.

Other useful links:

If you need any further help in this regard, ask me in the comments!