Starting with WordPress – themes

wordpress-banner-blue-2-min

After setting up your WordPress site, it’s time for customizing its appearance through themes. A theme is a collection of templates for pages and stylesheets used to define the appearance and display of a WordPress powered website. Not only it visually changes your site, but some themes also include some new functionalities. There are thousands of free and paid options. Each theme looks better than the other. A user needs to choose the one that suits their taste and requirements for their website.

How to change a theme?

They can be changed, managed, and added from the WordPress admin area under Appearance » Themes. By default, we have active WordPress theme named by the year. Themes are often designed for special purpose like web shops, photography, blog… or multi-purpose themes. You can install any theme in this menu simple by clicking install and activate. Many of these are free to install, but for full functionality, you will need to buy premium.

wordpress installing a theme kontra agency example

What are premium themes?

There are many more themes you can buy or download for free outside of WordPress admin menu. One of our favorite sites for buying new themes is Envato Market. Before buying any of these themes, make sure you read all the features and to test live demo. After buying a theme, you can install it using admin menu Appearance » Themes » Upload Theme.

Payed themes often come demo content, so when you import it, you will get fully setup homepage, and maybe even some other pages. These themes can also contain visual editor, which is great if you don’t know how to code. Visual editors will have all the elements you’ve seen in live demo and you can easily use them on your page. You can further edit these pages in Pages » Page_name » edit. Additionally, customization can be done through admin menu Appearance » Customize. Every custom themes comes with their own customizations.

When trying to make changes to a website, a lot of people edit their theme directly. This means they are changing or adding files like CSS or templates in their current theme’s folder. This creates a number of problems. The biggest problem is that any modifications made to the original theme in this way will be lost once the theme is updated by the developer. A much better idea is to use a child theme.

What is a child theme?

Child theme allows you to make any number of changes to a website without touching any of the original theme files. Some themes are better for this purpose than others. Furthermore, some frameworks are specifically made to be customized by a child theme.

Child theme can’t work without its parent theme – it uses everything present in the parent theme and changes only those parts that you want them to be different.

Set up a basic child theme

Let’s make a child theme of our default theme Twenty Seventeen, the latest default theme for WordPress. A child theme needs two files in its folder: a style sheet style.css and a functions.php file.

So connect to an FTP server and in /wp-content/themes make a folder with your_theme_name-child. Because we are using the Twenty Seventeen theme, we will call our folder twentyseventeen-child.  Child-theme-example-activate-kontra-agency

 

Next step is to create a style sheet, a code that determines the design of a website. Simply create a new text file and call it “style.css“. To make it actually work we need to have style sheet header right at the begigning of a file. You can look at your original theme for this code and add a child name to it. So your child themes style.css should look something like this:

/* Theme Name: Twenty Fifteen Child Theme
description: A child theme of the Twenty Fifteen default WordPress theme
Author: Ivan Jurković
Template: twentyseventeen
Version: 1.0.0 
*/

Our child theme will work with only this style sheet, but we wont have any styling from parent theme. So lets include it in functions.php. So make another text file and name it functions.php and then paste the following code:

<?php
add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );

function enqueue_parent_styles() {
 wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}

And that’s it go to WordPress admin and activate your new child theme, and you can start adding your CSS code and making a new templates.

If you need to make too many changes to your parent theme, maybe child theme won’t do it for you. You will be batter making a custom theme from scratch.