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.

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.

Leave a Comment