Category Archives for "Beginners"

Twenty Fourteen Child Theme – Click the Easy Button!

 

Twenty Fourteen child theme the easy way

2014 child theme doesn’t get any easier

Ok, this IS the easiest way to install a child theme for your WordPress Twenty Fourteen theme website! I’ve done it all for you–except for uploading and installing it on your site, of course. 🙂

There are two (2) versions: 1 has the code for removing the left sidebar as well as center aligning the site on the screen. The other just has the centering code (which you can easily remove if you would like to have your 2014 WordPress site aligned to the left).

To use, you simply download the zip file to your computer, then go to Appearance—>Themes in your WP admin dashboard, click “Add New”, find the zip file on your computer, install and activate. (you’ll need to have the parent Twenty Fourteen theme installed, which will usually be there already unless you have removed it).

This removes the left sidebar and centers the site on the page:

http://wphow2s.com/twentyfourteen-child-RL.zip

This centers site only (easy to remove centering code if left alignment preferred)

http://wphow2s.com/twentyfourteen-child.zip

Child theme DIY

Your Twenty Fourteen child theme is finished!

 

 

 

How To Create a WordPress Twenty Fourteen Child Theme – Easy!

WordPress Twenty Fourteen child theme

Alright, you’ve discovered WordPress and you are eager to get your first site online. You’ve watched a great WordPress tutorial video, maybe several, and you are ready to get started!

You may not think that you will ever make any changes to your theme using css, but as you get more into WordPress down the road, you may find that you want to…creating a child theme IS easy, so why not just do it anyway?! 🙂

Rather than write an entire new post and repeat myself, here’s what I wrote earlier about “How to Create a WordPress Child Theme”

The best ways to preserve any changes that you make to your original WordPress theme is to create a child theme and use that one instead of the original.

A child theme maintains the functionality of the parent theme, but allows you to make design customizations without losing them if your WordPress theme updates various parts of the theme’s code.

Here’s another video that walks you through the steps also.

The CSS code from my WordPress for Beginners video,using the Twenty Fourteen theme as the original parent theme, is below the video.

 

Here’s the Code

Just copy & paste this into your child theme style.css, change the details as needed . For ex.: if your theme is the Twenty Twelve, you would put twentytwelve under Template, and under Theme Name put Twenty Twelve Child, etc.(you would also have to change “twentyfourteen” to your theme name in this line too: @import url(“../twentyfourteen/style.css”); )

/*
Theme Name:     Twenty Fourteen Child
Description:    Twenty Fourteen Child Theme
Author:         Mike Simmons
Template:       twentyfourteen
*/

@import url("../twentyfourteen/style.css");

/* Theme customization starts below this line -------- */

 

Below are some tweaks that I used in the Properly Make a Website video. Use & adjust as needed, if you are using the Twenty Fourteen theme as your original parent theme.

/*controls height of featured content padding*/

.grid .featured-content .entry-header {
  height: 70px;
}

/*removes meta data of categories by display: none*/

.featured-content .entry-meta {
  color: #FFFFFF;
  display: none;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.09091;
  margin-bottom: 12px;
}

/*Page titles*/

.entry-title {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.09091;
  margin: 0 0 12px;
  text-transform: uppercase;
}

/*padding between menu bar and page content*/

.content-area, .content-sidebar {
  padding-top: 30px;
}

/*site title font size & color, etc*/

.site-title a, .site-title a:hover {
  color: #FFFFFF;
  font-size: 26px;
}

/*No auto text hyphenation*/

.entry-content,
.entry-summary,
.page-content {
	-webkit-hyphens: none;
	-moz-hyphens:    none;
	-ms-hyphens:     none;
	hyphens:         none;
	word-wrap: normal;
}

.nav-links {
	-webkit-hyphens: none;
	-moz-hyphens:    none;
	-ms-hyphens:     none;
	border-top: 1px solid rgba(0, 0, 0, 0.1);
	hyphens:         none;
	word-wrap: normal;
}

.comment-content {
	-webkit-hyphens: none;
	-moz-hyphens:    none;
	-ms-hyphens:     none;
	hyphens:         none;
	word-wrap: normal;
}

.widget {
	font-size: 14px;
	-webkit-hyphens: none;
	-moz-hyphens:    none;
	-ms-hyphens:     none;
	hyphens:         none;
	line-height: 1.2857142857;
	margin-bottom: 48px;
	width: 100%;
	word-wrap: normal;
}

/*This is so a sub-menu item in the left sidebar menu is not
 covered by a Cyclone slider image*/

#secondary {
  z-index: 9999;
}

Now you are ready to get started tweaking your theme to your desired look.

Make sure that you copy the beginning and ending { } brackets when pasting the code into your child theme style.css. 🙂

To learn more about using WordPress child themes, click here.

(WordPress image: CC BY-SA by Phil Oakley)