WordPress – Making a childtheme / Customizing WP default theme Twentyfourteen
Deprecated: Function create_function() is deprecated in /home/vhosts/poweredbygnulinux.com/wp-content/plugins/codecolorer/lib/geshi.php on line 4698
One of the advantages of WordPress is the amount of available themes. but sometimes we would like to make changes to the CSS styles (colors, font sizes, borders, etc).
For these theme customizations we can create a “child theme”.
A “child theme” allows us to make adjustments to a main theme without the need of hack the original theme.
Instead we can create a subset of dependent files from the original.
WordPress load the main theme and then apply the settings of your “child theme”.
First step – create a folder
Create a folder inside /wp-content / themes
For example, we can modify the default wordpress theme (named twentyfourteen)
Step Two – Create a style.css file
Inside your new folder -created in the first step – with your favorite text editor, create the file style.css
This file will make adjustments to the original topic.The header defines wordpress theme information used in the administration menu
Theme Name: TwentyFourteen Child Theme
Description: My first child theme
Author: Me
Version: 1.0
Template: twentyfourteen
*/
The first four lines are displayed in the wordpress themes menu. The last line is necessary because it refers to the parent theme.Now you can activate the theme in admin panel.
Step Three – link to main topic
To link the child theme to the main theme, we should add the following line in the file style.css
Very important: dont add spaces between url and (‘../ twentyfourteen / style.css’) , because it a sintax error and the style will not load.
Step Four – customize the style
You can now modify the styles by adding changes to the CSS.In example, to change the titles to uppercase we could add the following code:h1, h2, h3 {text-transform: uppercase;}
Now we have a “child theme” amending the original “theme” changing the titles to uppercase.
Customizing WP default theme Twentyfourteen
Lets start a new project to customize the default wordpress theme called twentyfourteen.
start a new project to customize the default wordpress theme called twentyfourteen.
Description: Customized wordpress theme
Author: Ariel Campos
Version: 1.0
Template:twentyfourteen
*/
@import url('../twentyfourteen/style.css');
Using different styles css, we will customize the theme . Let’s. change the color of the header, footer and sidebar, to a range of turquoise.
.site-info { background: #00abaf;}
/*Change header bkg color*/
.header-main { background : #00abaf;}
/* change left sidebar bkg*/
#secondary { background: turquoise;}
In the above code, we are selecting an item in the product (eg header-main is the header) then a property of that element (eg background sets the background color) and then assign a value (# 00abaf is a value hexadecimal defining a range of turquoise)
Let’s make more changes:
.search-toggle {
background-color: #ccc;
margin-right: 38px;
width: 100px;
}
/* customizing the search box*/
.search-toggle:hover, .search-toggle.active {
background-color: turquoise;}.search-box { background:turquoise;}
In the above code, also changed the search button, to gray color , also expands the right margin and extends de width to 100px.
.search-toggle:hover, .search-toggle.active define states for search-toggle : when it is hovered o selected it changes to turquoise color ( colors may be defined by its name)
Finally we changed the background color of the search box to match the rest of the page.
Our child theme will look like this:
Compare our child theme with the original theme.
Written by Ariel Campos (Web developer)