Choosing a theme for WordPress is a very important step before the huge work ahead. After all, this is what will determine what “face” your website or blog will have. You will have tens of thousands of both free and paid templates at your disposal, and their choice will depend only on you. You need to be careful when choosing a theme, because different themes have different structures and layouts, as well as different numbers of sitebars, styles, and much more. In this tutorial we will walk you through how to install a WordPress theme.

WordPress themes, what are they from and where to get them from?

You can get a template for your WordPress site in several ways:

• choose from publicly available themes in the WordPress.org directory;
• buy a premium theme from developers and distributors;
• order your own theme from programmers;
• create a template yourself.

Each of the options will help you implement a theme suitable for your site, the only difference is how unique and functional your template will be.

When installing themes available for download from the official WordPress website, you will in any case use the one that someone else already has. By choosing from popular ones, you can be sure that thousands of users of the popular platform have a similar template. But don’t rush to get upset, because any topic can be modified and adjusted, which can be radically different from the main one. If you wish, you can study our lessons on creating child themes and ways to change the appearance of the site.

By purchasing a premium theme from developers, you will provide yourself with a more or less unique theme that is used by a smaller number of network users, although again, this method of obtaining a template for a site is not much better than the previous one. After all, you will pay for something that someone else already has. The advantage of purchasing such themes is that they are generally of higher quality and functionality.

To order a unique theme from programmers-developers, you will spend quite a lot of money, but in the end you will get exactly what you wanted and this theme will be available only to you. A huge advantage of developing your own theme is its uniqueness, without unnecessary code and unnecessary settings and functionality. In addition, the presence of such a template will give your site an image in the eyes of users.

Creating a template yourself is painstaking work that requires considerable knowledge of programming, layout and design. This method is not available to everyone. This is why the themes that are sold and developed are not so cheap.

How to choose and install a WordPress theme

Attached to the article is a video tutorial on installing and configuring a WordPress theme.

In order to install the WorrdPress theme, you need to go to the appearance tab, then go to themes .

The themes available to you that are already installed will open. To select, and then download and install a fresh design template, you need to follow the link above “Add new”.

When you enter the theme selection menu, you will see the number of templates offered to you. In my version there are about two thousand.

You are offered to select the theme you need based on its appearance or select the search parameters yourself, which you can do by going to the “Characteristics filter” tab.

According to the proposed characteristics WordPress themes can be sorted by colors, page layout and features provided in the themes.

Themes can be viewed online and installed in your “engine”. After installation, go again to the “Themes” tab and, having found the previously downloaded one, click activate.

After completing this step, the theme you selected will be embedded into your site and will appear on all pages.

Customizing a WordPress Theme

By going to the “Appearance” / “Customize” menu tab, our website will open and on the left side of it, the theme settings, which depend on the theme itself and its functionality may differ. Here you can use the suggested parameters, which depend on the template itself, to configure some display in “real time”:

• description;
• configure the site name;
• fonts;
• screen width;
• adjust page layout and color;
• navigation, etc.

We have looked at all the possible options for installing a WordPress theme, we can see that this task will not take you much time. Also, with the template installed, we will be able to customize the sitebar and widgets, but we will consider them in a separate section.

However, this approach has a significant drawback. The next time you update the theme, all settings often simply disappear, since the theme update overwrites the style sheet files with a new one.

WordPress has a relatively simple mechanism to avoid this shortcoming - Child Themes.

Many bloggers using WordPress doesn't use child themes either because of a lack of understanding of how to use them, or because of the perceived difficulty of creating them.
Next, I will tell you how to customize a WordPress theme for yourself using a child theme and show that it is not particularly difficult.

Why use a child theme?

A child theme allows you to make changes to your site without affecting the main source code of the parent theme, which allows you to update the parent theme without removing the changes.

For a child theme, you need to create a separate set of files that can be used to customize the site without affecting the source code of the parent theme at all, but using the parent theme as a basis. This makes code adjustments much easier, and also ensures that the blogger never messes up his original theme, since he never makes changes to its "core" files. And in case of an error, he can always “turn off” the child theme and return to the original.

How to create a WordPress child theme

Method 1. Connecting styles via the @import rule

To create a child theme, just create a style file style.css and connect the styles of the parent theme to it using the @import rule.
As an example, I'll create a child theme for the Twenty Twelve theme included in the "base package" of WordPress. First things first, I create a new folder on my computer for the child theme. I'll call her: /twentytwelve-child/.
In this folder I create a file called style.css and fill the file with information as shown below:

/* * Theme Name: Twenty Twelve Child * Template: twentytwelve Description: My child theme for Twentytwelve Author: Alexander Koval Author URI: https://site */ @import url("../twentytwelve/style.css"); /* set your theme element settings below */

Strings Theme Name(Theme name) and Template(parent theme template) - required, the lines Description, Author, Author URI (author's website) are optional, and it is at the discretion of the creator to be in the topic or not.
The important part of this file is the line: @import url("../twentytwelve/style.css"); This line identifies the parent theme and imports CSS from it. When you create a “child”, you must make sure that the path to your parent theme’s CSS file is correct, and that the “Template:” parameter correctly defines the name of your parent theme. If you are using another theme, set the appropriate names for the other theme.

Please note - all names must be case sensitive: a name with a capital letter and a name with a small letter are different names!

Since my mother theme's folder is called "twentytwelve" and it is capitalized, hence the @import URL takes this factor into account.

Method 2. Connecting styles with code in function.php

To avoid unnecessary calls to the database, which leads to increased page rendering time, Codex WordPress does not recommend using the @import rule to connect parent theme styles

This method creates two files for the child theme: in addition to style.css in the child theme folder you need to create a file function.php and paste the following code there:

In this method, writing @import url(‘../twentytwelve/style.css’); in the style.css file of the child theme is completely unnecessary and the style.css file will look like this:

/* * Theme Name: Twenty Twelve Child * Template: twentytwelve Description: My child theme for Twentytwelve Author: Alexander Koval Author URI: https://site*/ /* set your theme element settings below */

How to activate a child theme

Once I have created a child theme folder and a style.css file in it, I can upload the newly created child theme to the server and activate it in WordPress. Downloading and activating a child theme is no different from downloading and activating a regular theme. You can upload it through the “Appearance” -> “Themes” -> “Add Theme” page in the WordPress admin panel.

Please note that before you can download a child theme, you must first create a ZIP archive of its folder. This can be done using almost any archiver.

And also, when activating a child theme, also make sure that you have the parent theme loaded in your WordPress themes folder (in my example, this is the “Twenty Twelve” theme).

Modifying the CSS theme

I have now created a child theme for Twenty Twelve and uploaded it to WordPress. Since in the child theme I import the CSS of the parent theme, when activated, the child theme will look the same as the parent. To customize my theme, I can add any changes to the child theme's CSS file below the @import line... In this case, all the new CSS information from the child theme is added after the parent theme's CSS is loaded, and therefore the "child" CSS in the SERP is below the CSS from parent theme, which means that any new CSS styles will overwrite the original ones.
For example, let's say that in my example I want to change the title of the site. Right now the font is bold and gray, but I want to make it thinner and red. I can add the appropriate CSS to the child theme in the style.css file like this:

/*
* Theme Name: Twenty Twelve Child * Template: twentytwelve Description: My child theme for Twentytwelve Author: Alexander Koval Author URI: https://site */ @import url("../twentytwelve/style.css");

/* set your theme element settings below */

Site-header h1 a (color: #FF0000; font-weight: 300;)

In order to understand how to install and configure the theme and other minor nuances, we will look at an example using a template named “Aldehyde”, which can be easily found in the free WordPress project templates.

We go to the administrative panel of the site. Go to the “Appearance/Themes” menu section. Click on the add new button.

In the search, type the name of the topic you are looking for, in our case it is “Aldehyde”. Click on the “install” button and then “activate”. After this, the new theme will work. Now we need to customize it for ourselves.

Setting up a theme using the “Aldehyde” template as an example.

In order to start customizing a theme or template, you need to go to the “Appearance” item in the menu and click on the “Customize” button.

In the Header settings section:

• in the sub-item “title, tagline & logo” you need to add the title, logo and site icon.
• In the “social icons” sub-item we set social icons. Here you need to provide information in the form of links to social media. site owner's network.
• Next comes the sub-item “header image”. Here the background image of the header changes.

In the second section Design and layout You can customize the design and layout of the site. In this section you can set the desired display of content on the blog (one or more columns). In addition to displaying content, the section allows you to activate or disable the display of side columns on some pages or even on the entire site. In this section you can also apply various style sheets and set information in the footer of the site.

The Design and layout section contains the following sub-items:

• Blog layout – blog feed design
• Sidebar layout – turn on and off the sidebar (side column)
• Custom CSS – editing template CSS styles for advanced users.
• Custom Footer Text – Adding text to the site footer.
• Theme Skins – select a color scheme for the template.
• Colors. This section allows you to select the color and background of the resource name and description.
• Google Web Fonts. This section will help you choose different fonts from Google.
• Background image. Here you can upload the necessary photo or image for the background.

In the next section called Main Slider(Main slider) you can select the appropriate settings for it. But in the initial stage it is not necessary, so it is not recommended to pay special attention to it for now. The disadvantages of the main slider include high resource load. Moreover, this component can rightfully be called an opponent of mobile versions of sites.

Next comes the Custom showcase section(Custom showcase). Here you can beautifully design 4 blocks with links to important pages of your site.

Next, we will offer sections on widgets and the static nature of the main page; it is recommended to skip them for now, because the static nature of the main page was already customizable, and it is more convenient to configure widgets in the main menu of the designer. To do this, go to the appearance section and click on the “Widgets” button. After this, various widgets for application and use will become available on the left side. By dragging with the mouse, you can move the widget you like to the footer or side columns of the site. After this, you need to easily configure them and save all the actions.

It is very important not to load the side columns of the resource with widgets; it is much more effective to leave only the most necessary ones.

Setting the display and appearance of the menu.

In order to practically customize the display of the resource menu, which can be found in the “Appearance” category, you should resort to the following instructions.

1. You need to give the menu a name and click on the “Create” button.
2. Add the most necessary top-level pages there.
3. In the settings of such a page, use the link text for its subsequent display.
4. You must check or uncheck the box for automatically adding top-level pages.
5. Select a location to display the menu on the site. This theme supports two menus in the header.

After you have purchased a domain and ordered hosting, it’s time to configure WordPress. The blog cannot be used in its current form. You need to properly configure permalinks, select and install a theme (design), and connect all the necessary plugins.

All these settings are needed to ensure that the blog has a neat appearance both for future visitors and for search robots. Which will have a positive impact on further search engine promotion.

You also need to understand the console menu. The console is also called the “admin panel”. You may have noticed that there are quite a lot of additional settings in the admin panel.

To get to the blog admin area, you need to go to site.ru/wp-admin/. Replace site.ru with your domain name.

1 Home

The main page contains basic information about the entire blog. From this page you can add an article, make basic theme settings, or see the latest comments made on an entry.

2. Updates

In updates you can see the current version of WordPress and whether it requires new updates. As soon as the developers release an update, you will see it in your admin panel.

Don't forget to update if you are asked to do so. This will protect you from hacking attempts by intruders.

3. Records. All entries

In this menu you can see all the recordings made over time. You can also see how many comments each article has received and what category it belongs to.

Hover your mouse over the article and a submenu will appear with which you can edit, go to, or delete the article.

If you didn’t change anything after installing WordPress, then you will already have your first test post. Point it at it and delete it. If you delete an entry by mistake, you can always restore it from the Recycle Bin. If the entries are no longer needed, do not forget to empty the trash.

3.1. Add new

Before you start publishing articles on your blog, you need to make a few very important settings. Make them in paragraphs 8.1 and 11.3. After you have set up permalinks, or as they are also called (CNC), you can start publishing articles.

The title is written at the top. It should not be too long and not too short. Once you enter the title below, a permanent link will appear. It will look like this if you install a special plugin, which is found in paragraph 8.1.

Below you will find tools with which you can format text, add pictures and place active links. If you are familiar with the Word program, then there will be no problems with this.

If this is your first time encountering such an editor, then watch video tutorials on YouTube on how to add an article to a WordPress blog. Once your article has been added and formatted, select or create a category for it. One article per category, remember this!

Upload a thumbnail, this is a small picture for your article. Such pictures support most themes. Once everything is ready, click on “Publish”. Now go to your blog's home page and see what your post looks like.

Working with pictures

When adding photos, try to always include the “Alt” attribute. If you use your own photos, this will allow you from the “pictures” section.

2-3 words about what is shown in the picture itself are enough. If you don’t know what to write, it’s better not to write anything.

The photo can be aligned to the center or edge. If you have a large picture and you want it to open in full size when you click it, then select “link to media file”. If you need to redirect to another site, then use a custom url.

In the size setting you can set the size you want. Remember that the width of the blog itself is rarely more than 1000 pixels wide. I recommend setting it to full.

Make sure that all your photos have a name in Latin letters before uploading to your blog, for example, moy-dom.jpg.

3.2. Categories

This menu is intended for creating categories. For example, you have a blog on culinary recipes. The headings could be:

• Salads
• Snacks
• Beverages

Write your category in the title. In the label, write the name of the same category, but only in Latin letters. You can also write it in Cyrillic, but I recommend doing it as in the example.

Rubrics may have subcategories. For example, “Salads” may include the following subheadings: “Chicken salads”, “Simple salads”, “Salad recipes for the winter”, etc. Subcategories can be created in the “Parent” menu.

Write 2-3 sentences describing your section. State the essence. Be sure to make it unique. This means that you must come up with this description yourself, and not copy it. Once all the fields are filled in, you can click on the “Add new category” button.

3.3. Tags

Tags are needed to make a large website more user-friendly. If you do not plan to create a large portal with many categories and subcategories, then it is better not to use tags.

4. Media files

In this section you will find all the photos that have ever been uploaded to the blog. You can also add a new photo to your library. We practically won’t need this menu, since you can add a photo to your article in section 3.1.

5. Pages

Do not confuse this section with posts! Such pages are needed mainly for information. For example, on my blog there are separate pages about the author and about the blog. You can create a page with your organization's contacts or any other information.

Now you have a test page. Look at it, try to edit it and then delete it.

In this section you will see all the created pages. If you need to create a new one, then simply go to the “Add New” menu and use the editor, as in menu 3.1.

6. Comments

Here you can see all the comments made by your users. Comments can be disabled, approved and edited.

7. Appearance. Themes

By default, WordPress provides 3 themes. Their design is so-so and rarely anyone uses them. You can see all three topics in this menu. There are a large number of sites on the Internet that offer to download free templates.

I recommend installing themes from the official WordPress store. Firstly, they are free, and secondly, they do not contain malicious code or viruses. To install a new template, just click on “Add a new theme”.

You will be taken to a section where you can select the topic that you like. Hover over any template and see what it will look like. You can select a topic by filtering the characteristics you need. Once the selection is made, click on install and activate.

Don't be afraid to put different themes. It is very difficult to find one that you like the first time. You can always delete all unnecessary topics at any time.

Free templates also have their downsides. They are poorly optimized for search engines.

Or you can immediately buy an inexpensive template for your project, which will eliminate all technical errors. Install the theme, customize it once and use it.

If you have any questions about setting up the theme, the Russian-speaking support service will always help you free of charge. I recommend choosing from these three templates.

Also in this section you can always change your password and email.

10. Tools

You can safely skip this section, there is nothing interesting here yet. When adding new plugins, some of them will be located here.

11. Settings. Are common

For some reason the most important menu is at the very end. Before you start publishing articles and creating new pages, you need to make settings.

Write the name of your site. The description should be short and clear. It should contain the entire essence of your niche. You can skip the brief description. If you have something to write, then fill it out. You can write some slogan.

WordPress address and website address. Here you can specify how your blog will be displayed. For example, with or without www. https or http. This is a very important parameter, be sure to fill it out.

If you registered a domain and hosting in my opinion, then you must have a secure https protocol certificate. So, set the settings as in the picture. Select the date and time format that you need. We skip the “writing” menu.

11.1. Reading

11.2. Discussion

In this section you can configure your blacklist. If you see that someone is leaving spam comments for you, you can blacklist them. It is enough to add an IP address, which can be seen in the comments or create your own list of stop words.

For example, if you add the words: www, http://, download, free, then such comments will not undergo automatic moderation. You can safely skip media settings.

11.3. Permalinks

One of the most important WordPress settings is located here. This is the permalink setting. Check the “Custom” box and paste the following template there:

/%category%/%postname%.html

Yandex metrics

To find out how many people visit a blog, you need to install a special counter on it. This counter will show detailed information about the user. I recommend installing Yandex Metrica.

If you do not yet have mail from Yandex, then register it right now, it will take a few minutes.

Once you are inside, click on “Add Counter”.

Next, fill in: the name of the counter and the website address, check the “I accept the condition” checkbox, create a counter. Check the box for web viewer and click save. Below you will see the counter code that needs to be installed.

Copy it and go to the admin area of ​​your blog as shown in the image below.

Find in the right column and click on “Header (header.php)”. Paste the copied code into the free space. It's better to do it where it ends.

Click update file. Return to the list of counters by clicking on “Counters”.

Ready! After some time, the counter will record all visitors to your blog. Click on the name and you will be taken to the main menu.

If you want to understand all the capabilities of this tool, then refer to the manual.

robots.txt

If you don’t know what robots.txt is and what it is needed for, you can read it in the Yandex help. In order not to suffer and not compile it yourself, you can simply download it.

Don’t forget to correct your site in the file by replacing site.ru and site.ru/sitemap.xml with yours. Also enter http or https. Now you need to upload it to your server in the root folder where your blog is installed.

If you use Beget hosting, which I recommend, then you can download this file as follows. Log in to your hosting and click “File Manager”.

Find the folder with your site and go into it by clicking 2 times. You should see this:

Go to this folder by clicking 2 times. You are now in the root folder of your site. Now click "Upload Files" and "Browse..."

Now you can check. Enter the following query in the search bar: https://site.ru/robots.txt replace site.ru with your site. Also consider the meaning of https or http.

Registering a Domain. Setting up Hosting. Let's install a blog!

Conclusion

Now your blog is completely set up and ready to go. Start filling it with quality articles for people. Start to slowly understand SEO (search engine optimization).

As soon as your blog reaches 500 visitors per day, then buy a unique theme. If you have any questions, be sure to ask them in the comments below.

Best regards, Sergey Smirnov.

Each design theme has a number of settings that can be changed from the CMS control panel. The variety of parameters may vary from template to template, but almost every theme allows you to customize the logo, background, fonts, sidebars, title, and description of the site from the admin panel.

Despite this, the site owner may want to change some little things that the control panel does not allow. In this case, you can hire a webmaster, but if you don’t have money or have time, you can easily figure out the template and make the necessary changes yourself.

The engine theme consists of many files. Knowing what part of the site each of them is responsible for, you can easily edit the design of the CMS template to suit your needs.

The theme files contain HTML, PHP and CSS code. There is a separate reference book on HTML/CSS on the site, but PHP knowledge is basically not required to create a design.

So, any WordPress template has the following files.

1. index.php. The file forms the main page of the site and calls other theme files.

2. header.php. Creates the top, “header” of the site - usually it contains a logo, title, description of the web resource, as well as a horizontal menu. HTML container is also in this file.

3. footer.php. Contains the code for the bottom part of the site, its “footer”.

4. style.css. Cascading style sheet file. Since it is usually quite large, style.css well commented. Unfortunately, most often in English, but basic knowledge will be enough to understand which part of the code is responsible for the design of which elements. Read more about CSS here.

This is a required base for a WordPress template, but there are usually many more theme files, and here are the most common ones.

1. single.php- separate post.

2. page.php- page.

3. sidebar.php- side panel/panels.

4. archive.php- archives of articles.

5. search.php- search results page.

6. comments.php- output of comments.

7. 404.php- error page with code 404 (File not found).

8. function.php- a file containing theme functions. You can add your own PHP scripts to it.

Of course, templates usually contain many more files than described above, but they usually do not need editing. In addition, you can learn about the purpose of each file from its name and comments inside.

Editing templates is often required to correct or add some small detail. Below are a few common situations.

Add menu

The menu can be placed not only in places set by the theme (this is done through widgets), but also in any other part of the site or even on a specific page.

To insert a menu anywhere, add the line:

directly into the page code where you want to place it. The line will work if there is only one custom menu on the site. If there are several, you should add a line like this to the code:

"Menu_1")); ?>

where instead of Menu_1 you need to enter the name of your menu.

Change 404 page

If the link leads to a non-existent page or file, WordPress takes the user to an error page with the code 404 (File not found). The file is responsible for it 404.php, stored in the active theme folder. Often English text is displayed on the screen, and the desire of the owner of a Russian-language site to translate it into his native language is quite understandable.

To change the contents of the page, open the file in the editor 404.php, find the lines with the text displayed in the browser and change them (the displayed text is most often enclosed in quotes). For example, in one of the standard themes (twentyfourteen) you will be interested in the following code:

Replace the text in quotes (not where twentyfourteen is, but something else) with your own and get a modified 404 page.

Register copyright

At the bottom of the site it is customary to write official information, in particular, the years of operation of the resource and copyright. In the vast majority of cases, your “label” in the file footer.php left by the authors of the themes, and webmasters, naturally, want to replace this information with their own.

As we know, the “legs” of the site are responsible for the file stored in the root of the active theme footer.php, and you should look for the code responsible for copyright in it.

For example, the flat-white theme hides supporting information in the following lines of this file:

" title=""> ">

Russify text

Often, WordPress templates are not fully Russified or not translated at all. Knowing the file structure of the theme and the fact that the text shown to the user (if it is not a variable) in the code is always enclosed in quotes, it is easy to find and independently translate the desired fragment, and it is not necessary to search for the word manually - for this you can use the automatic search, which is present in every code editor.

For example, in the flat-white template you immediately want to Russify at least two inscriptions: “READ MORE” and “Leave a Comment”, since they are visible on the main page.

The file is responsible for the main page index.php, located in the root of the theme directory, therefore, you need to edit it. But there is no text for the inscriptions, so you need to understand the code to find out where they are stored. In our case, the file is responsible for the information under the posts on the main page template-parts/content.php, connected by string

If you go into it and in the code

"; ?>