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

 

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.

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.

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:

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)