How to Create a WordPress Child Theme

Share This:


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.

wordpress

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.

It’s very easy to do, just follow along with the video below and you can create your own WordPress child theme in a snap.

The child theme code referred to is below the video.

 

Here’s the Code

Just 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 “twentythirteen” to your theme name in this line too: @import url(“../twentythirteen/style.css”); )

/*
Theme Name: Twenty Thirteen Child
Description: Twenty Thirteen Child Theme
Author: Mike Simmons
Template: twentythirteen
*/

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

/*Your theme customization codes go below this line*/

The code below is only for the Twenty Thirteen theme. It goes below the @import url(“../twentythirteen/style.css”); line. Try one snippet at a time to see what it does. Change the values as needed…and have fun!

/*navigation menu font color, size*/

.nav-menu li a {
color: #141412;
display: block;
font-size: 15px;
line-height: 1;
padding: 15px 20px;
text-decoration: none;
}

/*Code controls site title font*/

.site-title {
font-size: 60px;
color:#141412;
font-weight: bold;
line-height: 1;
margin: 0;
padding: 58px 0 10px;
}

/*The code below controls the color and size of the post titles*/

.entry-title a {
color: #141412;
font-size: 3.9rem;
}

/*This code controls the color of the post titles when cursor is hovered over*/

.entry-title a:hover {
color: #CA3C08;
}

/*stop auto text hyphenation*/

.widget {
	background-color: rgba(247, 245, 231, 0.7);
	font-size: 14px;
	-webkit-hyphens: none;
	-moz-hyphens:    none;
	-ms-hyphens:     none;
	hyphens:         none;
	margin: 0 0 24px;
	padding: 20px;
	word-wrap: nomal;
}

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

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

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

MIKE SIMMONS (10 Posts)

Mike Simmons has a real passion for online "stuff", is an avid WordPress fan and user, really gets into designing, developing, and optimizing websites, and gets great satisfaction out of helping others to get started online by creating their own websites with WP...and more -- so in his spare time, he's busy creating WP tutorial videos for his YouTube channel(s) and more free content to share on WPHow2s. For more great info follow, like, and subscribe on Mike's social hangouts. Keep on keepin' on!