How To: Change the post width in Twenty Fourteen (WordPress default theme)

The default width of the post in Twenty Fourteen WordPress theme is 474px.

When you remove all the widgets from the Content Sidebar, the post text does adjust a little bit and move to the right to remain centered. However, the width of the post still remains to be standard 474px.

This CSS code will help you in changing that width. However, I would strongly recommend creating a child theme, if you already don’t have one.

Do this first: Create a child theme for Twenty Fourteen WordPress theme.

Now, use the code below to change the width as you please. In my example, I changed it to 700px. Change only the number 700 in the code below to a preference of your choice.

 .site-content .entry-header,
 .site-content .entry-content,
 .site-content .entry-summary,
 .site-content .entry-meta,
 .page-content {
 margin: 0 auto;
 max-width: 700px;
 }

While this should suffice, you may also want to change certain other aspects to match the width to maintain consistency. The names of the blocks should tell you what you’re changing.

max-width: is the property that needs the new value.

 .post-navigation,
 .image-navigation {
 margin: 24px auto 48px;
 max-width: 700px;
 padding: 0 10px;
 }
 .archive-header,
 .page-header {
 margin: 24px auto;
 max-width: 700px;
 }
 .contributor-info {
 margin: 0 auto;
 max-width: 700px;
 }
 .comments-area {
 margin: 48px auto;
 max-width: 700px;
 padding: 0 10px;
 }
 .site-main .mu_register,
 .widecolumn > h2,
 .widecolumn > form {
 margin: 0 auto 48px;
 max-width: 700px;
 padding: 0 30px;
 }

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.