Create a template for WordPress is easier than you might think. To do this, you do not need to have extensive experience in website design or programming. In this article, we'll walk you through the basics of creating your own WordPress themes from scratch.
Why might it be necessary to create own template WordPress, when can I use the templates available in the database? Here are some reasons that may prompt this:
Of course, pass full training How to create a page template cannot be done with just one article. To begin with, it is important to understand the basics - how the most simple themes. Based on them, you can already get creative and create a landing page or website according to your desires. Now we will give you a short cheat sheet with step by step instructions– it will help you understand how a website is created.
Step one: preparatory work
Before starting work, you need to make sure that you have text editor(the simplest is Notepad or Nodepad++, especially since you can download them for free). Next step- installation WordPress engine and Denwer set on local computer. Denver is a package of essential tools for programmers. With their help, the process of developing and modifying websites is greatly facilitated and accelerated. This video will show you how to install it:
Step two: create a new theme folder
Let's go to the desired directory. It most often takes the following path: . All themes are stored here - both standard and custom. Let's go into it and create it new folder. We call it, for example, “MyFirstTheme”.
Now go to a new folder and be sure to add two files made through Nodepad++ or another editor. These are index.php and style.css. For now, let these documents remain empty, then we will start filling them out. Also add the images folder to “MyFirstTheme”. where you can add pictures to decorate the template.
Subsequently, you can add templates to “MyFirstTheme” for individual parts of the site: sidebar (sidebar.php), site (header.php), posts on pages (single.php), comments (comments.php), etc. Set additional files depends on the structure you plan for your web resource.
Step three: filling index.php
The first thing to do is fill out index file(index.php). Here is an example of the simple code, according to which the site will have four areas: header, main, sidebar and footer.
In the file you can register any elements that you want to see on your website. More information You can learn about writing index.php code to create themes in WordPress from the video:
Step four: fill in style.css
Now you need to open style.css, add and fill following fields(instead of ***, enter your own information about the site and owner). The entered data will be displayed in the admin panel.
/*Theme Name: ***
Theme URI: http:// ***
Author URI: http:// ***
Description: ***
Subsequently, it will be possible to enter various data and rules into this file that determine the appearance of the pages. For example:
(the information in /**/ is comments, not parts of code)
On at this stage It’s too early to set strict style parameters, but further work with the file you will find this video tutorial useful:
Step five: split the files
All elements specified in index.php should be duplicated in separate files. In step one, in the example, in addition to the main part, header, sidebar and footer were specified - therefore, we create our own documents for them in .php format.
For example, create a file header.php, open index.php. find the corresponding section of code and paste it into new file. It will be:
The same is done for the remaining parts. This should be done for easier navigation. When there are many elements of the future site, then separate files will help you better navigate for checking or making changes.
In order for the main index file to be consistent with the additional ones, the following must be written in index.php under the blocks for each part:
Below is a list standard files templates used by WordPress. You don’t have to use them or add your own sections:
When you subsequently refine each element, you will need a visual video tutorial. Here are a few selections that may help you:
Header in header.php:
Adding content:
Styling comments:
Footer on the site:
When you need to make changes to website pages, there is a risk of writing something incorrectly and not being able to “roll back” it. It may also happen that stylesheet entries disappear when the main theme is updated.
To prevent this from happening, you can create a child WordPress theme (subtheme) - this is a duplicate of the style.css file that does not affect the main file (changes in one do not cancel updates in the other).
Creating a subsidiary WordPress themes it won't be difficult. You need to make a new folder in the main directory C:\WebServers\home\localhost\www\NAME_SET_DUR_INSTALL\wp-content\themes. In the new folder we create our own style.css file with the following content:
Theme Name: TOPIC NAME
Template: FOLDER NAME IN CHILD THEME
Theme URI: FILL IN
Description: FILL IN
Author URI: FILL IN
/* import the styles of the parent theme */
@import url("../NAME/style.css");
/* Your own additional styles */
Foo( color:red; )
Now you can go to “Appearance›Themes” in the admin panel and activate the child template. In the future, you can work in the new file. In addition, a short video presentation on the topic of child templates:
If you use downloaded themes, then you have probably come across a page that is available in the admin panel and with its help you can customize the theme without editing the code of the theme itself.
Such pages are often created to make life easier for users of a particular topic. Thanks to the theme settings page, the user can hide certain blocks, change the location of the sidebar, color schemes, add your own styles, indicate the path to new images, etc. Everything is limited only by the imagination of the person who created such a page for the topic.
If you are creating a theme for sale or simply want to make your life easier, then you may find it useful this method. In one of the lessons, I wrote that you can display metrics (visitor counters), advertising, etc., through widgets, creating special places for them. Using the theme settings page, you can create the same fields into which you can insert any text, code or links.
In general you will have additional options themes that you can make yourself without a plugin. It looks something like this:
I will write about several elements of such a page and explain how to use them. I created the page from a bunch of others. I found many different ones, but each one had something that didn’t suit me or didn’t work. One did not have checkboxes or checkboxes, the second did not have a message that the settings were saved, a lot of unnecessary text, etc. After sitting for a while and figuring out what was what, I got my own page on which I can add and remove elements without any problems.
Let's get started making our settings page.
First, you must decide how exactly you will connect the page code. There are two options.
The first one is simple, we add everything at the very end of your functions.php after ?> and that's all.
The second way is to create a file settings.php and add all the code to it, then connect it to functions.php in the following way.
Include("/settings.php");
When you create settings.php, before adding code to it, make sure it is saved in the correct encoding - UTF-8 without BOM. It is best to edit files in the Notepadd++ program.
Now let's start adding the code itself. First, let's register our function.
Now let's add our page to the admin panel in the menu on the left.
// Adding a Settings Page to the menu function add_settings_page() ( add_menu_page(__("Theme Options"), __("Theme Options"), "manage_options", "settings", "theme_settings_page"); ) //Adding actions add_action( "admin_init", "theme_settings_init"); add_action("admin_menu", "add_settings_page");
Now, when you go to the admin part, you will see this item in the administrator menu. This will be our settings page.
Let's add actions and a function for saving our page options
//Saving settings function theme_settings_page() ( global $select_options; if (! isset($_REQUEST["settings-updated"])) $_REQUEST["settings-updated"] = false; ?>
Now we’ll start adding the code that will display the elements of our page. Create a div and add blocks inside it.
The first element will be the title of the page, which will be displayed at the very beginning, then a block within which a message will appear stating that the settings have been saved.
settings have been saved
Now the whole code
settings have been saved
The settings page is ready. You can look at the finished result. Next, we need to display the results in the right places in the topic, then we will select or enter in the options.
To do this, you first need to enable our function
This line must be written each time before displaying the option
Immediately after launch, we add the output of the option itself. It looks almost the same for text fields and input fields, the main thing is to specify the names correctly, which I have already written a lot about above.
For a logo, for example, it’s like this:
The finished result will look like this
I think this is clear. If we want to display the value from the settings page, we insert the code above in the right place, just specifying the names correctly. So we display for the metric and the banner, changing only the names to tracking and banner, or those that you come up with, the main thing is that they coincide with those on the settings page.
You can still pull off one more trick. Using the example of the option - Text in the footer, I suggest adding a condition - If. The bottom line is this: initially, the text in the footer is written by default, but if the user enters something on the settings page, then instead of the default text, what the user specified will appear.
To do this we need to write the following code:
/" title="" rel="homepage">. All rights reserved. Any use of materials is permitted only with an active link to the source.
In order to display the content if the checkbox is checked, you need to write the following code. Similar to the text in the footer, but only the first half of the code
Contents if the checkbox is checked.
You can add any content. At least hide half of the site if necessary.
Now all that remains is to display the content of what the user selects in the list. For us it was placing the block on the left or right
Here, as with the text in the footer, we will use the condition - If. There are only two elements in my list, so the condition is this: if item number one (on the left) is selected, we show the block that has the property in the styles - float:left;, otherwise we show a block with the property - float:right;.
Block on the left
Block on the right
In principle, I showed you the basics. You can add and remove elements, change everything for yourself and create something. The lesson is not easy and the main thing here is not to get confused, but having understood and studied well, you can easily create such pages for all topics.
That's all, thanks for your attention. 🙂
With this article I continue a series of lessons on creating websites using the WordPress engine. After installing a new theme on the blog, we will need to customize it to suit our needs. This is not at all difficult to do. But for editing WordPress template , you need, at a minimum, to know how it works and which files are responsible for what. Having studied WordPress template structure and having basic knowledge of HTML and CSS, you can already edit the theme template, changing its appearance and functionality. But first things first.
Immediately after installing a new theme, your blog is unlikely to have an attractive appearance. To fix this, you need to customize your WordPress theme by adding and organizing all the necessary elements on your blog pages. So let's get started customizing a WordPress theme template.
Let's go in Toolbar() WordPress and will continue to study it, examining in detail all the points in the “Design” section, which is responsible for the appearance and editing of the WordPress template:
The next tab is “Widgets”. When we switch to it, the following picture will open before us:
On the left side we see everything “ Available Widgets“: RSS, Archives, Calendar, Find, Tag Cloud, Latest Posts, Headings, Text, etc. The blog sidebar is schematically indicated on the right. Depending on the structure of the WordPress template, there can be one or several sidebars. On a blog, it looks like a sidebar located on the right or left, and possibly on both sides at the same time.
In order to fill the sidebar with the widgets we need, we just need to select the required widget with the left mouse button and, holding it, drag the widget to the sidebar we need. In the same way, you can move widgets up or down in the sidebar itself.
What each of the widgets means is clear enough from their names. The “Text” widget deserves special attention. By moving it to the sidebar, fields for entering data and a title will open. Here you can insert both regular text with pictures and various HTML codes. For example, statistics counters, advertising blocks and banners, subscription forms, etc. After filling out or editing the “Text” widget, click the “Save” button for the changes to take effect. Unneeded widgets can be removed by clicking the “Delete” button or dragging them back to the “ section Available Widgets“. If you need to temporarily disable a widget, while saving all its settings for future use, drag this widget down to the left into the “ section Inactive widgets“. You can return it back at any time.
Next is the “Menu” tab. Having opened it, we find ourselves on the page for creating your own blog menu with a detailed description of how to do this. You can include categories, pages and arbitrary links in the menu by arranging them in the required order by simply dragging and dropping. By clicking the “Save Menu” button, the blog menu will be created.
In order for the created menu to appear in the sidebar, you need to go to the “Widgets” tab and drag the widget “ Own menu” in the sidebar. Accordingly, if you have activated the “Categories” and “Pages” widgets on your blog, they can be deactivated. I must say that few people use the menu on the blog.
The last tab “Editor” allows you to edit WordPress template files. Having opened it, on the right you will see a list of all WordPress template files, that is, its structure. When you click on any of these files, its contents will open in a window for editing. After making the necessary changes, do not forget to confirm them by clicking the “Update file“ button.
So, we studied the “Design” section in the admin panel of our blog and figured out the WordPress theme (template) settings.
It is worth noting that almost every modern theme has its own settings. Usually they are placed in the admin panel in a separate section with the name of the topic.
Sometimes custom settings for a WordPress theme template are found as separate items in the “Design” section.
How to configure a particular theme should be described in detail on the website of the developer or localizer of the template from which you downloaded it. Individual WordPress theme settings allow you to easily, without interfering with the source code of the template, change website design elements (logo, background, fonts, sidebar layout, etc.), insert banners, social networking and RSS buttons, statistics counters, advertising blocks and much more . I advise you to carefully study these settings, especially if you are new to HTML and CSS.
Attention! It is important to know that if you made changes to the individual settings of the template, then when installing a new theme, these settings must be returned to their original state. Usually for these purposes there are buttons “Reset” or “ Restore to default“, depending on the WordPress theme you choose.
Now let's see what files the theme template consists of and study its structure.
Each of the WordPress template files is responsible for the design of individual blocks on the site’s web page. Then, like a construction set, blog pages are assembled from these blocks into a single whole. Since WordPress themes (templates) are created by different developers, the structure of these templates may be different. Some theme template files are required to be present on every web page, while others are only displayed in certain cases.
In the picture below you can see the approximate structure of a WordPress template.
Here is a list of files that are usually present in all templates and their brief description:
Now knowing WordPress template structure and what each of its files is responsible for, you can change the appearance and functionality of a certain part of the site.
It is important to understand that without at least basic knowledge of HTML and CSS, it is better not to try to edit WordPress theme (template) files. And if you still need to edit a template file, be sure to make a backup copy of it first. Then, if something goes wrong, you can always restore the original file.
I would like to note from myself that edit WordPress template It’s more convenient not from the blog admin panel, but by opening the file in Notepad++, using a connection to the hosting server via an FTP client. You can read about how to do this in the article ““.
That's all for today. Now the site you created will look much more attractive. See you on the blog pages.
Leave your comments and don’t forget to click on the social media buttons at the bottom of the article, thereby you will help the development of this blog. Thank you in advance!
If you want your WordPress site to become promising, then first you should think about creating a unique theme for it. This process is quite labor-intensive, because it is directly related to various encodings and scripts. Let's look at it from scratch.
Almost every WordPress theme is installed in the wp-content/themes directory and consists of 3 categories of files:
The style sheet files are style.css. They are responsible for the color, size, font and other parameters of site elements. Each site has only 1 style.css file. If you open this file, at the very top you can see information about the title, author and brief description of the topic. When creating your own theme, you can enter information about yourself in style.css.
The next category is files of additional functionality. These include functions.php, the principle of which makes it look like a plugin. Thanks to this file, you can visually customize the theme directly in the admin panel. Usually the list of settings is not very wide (site name, color of navigation and side panels of the site, and so on). If the theme is multifunctional, then the list of settings will be much wider.
Now let's move on to the template files. Their main function is to generate pages that are requested by site visitors. Template files have the extension ".php". Most simple themes may only contain one template file called index.php. In this case, all pages of the site will be identical. This design is most often used to create Internet resources with databases, when design does not play a key role.
If you've never created a design before, you should try creating a simple theme first. For it to work properly, you will need at least 2 of the following files: style.css and index.php.
Additional functionality files may not be used in this case, as you understand. Among template files, index.php is one of the most flexible. It can independently generate headers, various blocks, bottom part (footer), content and other elements of the site.
It is worth noting that those parameters that are not generated by the index.php file will be generated by standard files. For example, if your theme consists of only 2 of the above files, but the user needs to generate a form for adding comments, then the standard comments.php will perform this function. Therefore, if you want your theme to be more unique, it is worth making additional template files. Let's look at the main ones.
First you need to install a suitable template. It can be found both on the official website wordpress.org and on any other. It is recommended to use the official site, because any third-party site may contain malicious files and broken links.
After you make your choice, you can start downloading the archive. At the end of the process, you will need to unpack it and upload the files to certain folders on the site (the archive usually contains small instructions). The download can be done using the FileZilla program or directly from the hosting, if it supports such an option. Now all you have to do is go to the “Themes” section, select the one you downloaded, and click on the “Activate” button.
You can also select it directly in the WordPress admin panel. However, you do not need to download it. You will only need to click on the “Install” button and then “Activate”. It is suggested to preview before installation.
Now that the theme is activated, you can move on to uniqueizing it. The first thing you should think about is the top part of the site (header). This is the first thing that will catch the eye of your visitors, so you should do it responsibly. Typically, the header consists of the site name, logo and brief information about the content. The header can be created in any graphic editor. Even in standard Paint. More advanced designers use Adobe Photoshop.
The site name should be small and easy to remember. In Adobe Photoshop you can choose many different styles for it. When creating a logo, you may need different shapes. They can be downloaded from the official Adobe Photoshop website.
After you make a header drawing in a graphics editor, you will need to upload it to your website. Once the download is complete, a URL will appear to the right of the picture, which you will need to copy. Then you will need to go to the “Editor” section and select the file that is responsible for generating the header (header.php). In it you will need to find the URL of the current image and replace it with the one you received when uploading the header image. After this you will need to update the file. Now you can proceed to checking the display of the header.
If your header has different parameters than the standard one, then you can adjust them in header.php. The width is controlled by the width attribute, and the height is controlled by the height attribute. The setting can be made in pixels and percentages. So, if you just want to stretch the cap, then set it to 100%.
If you wish, you can add active links to WordPress site pages to the header. This can be done using various services. There are quite a lot of them on the Internet. Most of them work on the same principle. You circle the desired area of the header, which will be allocated for the link, and the service will give you the required code. You will then need to add this code to your header.php file. Be careful when adding it. Every point matters. If you add the code in the wrong place, active links will not appear in the header.
After replacing the standard header, you can start replacing the standard background of the WordPress site, widgets, navigation, bottom (footer) and other components of the WordPress site. They can also be drawn in any graphics editor and uploaded to the website in the form of a drawing.
You should take into account that it should not be bright. Most webmasters prefer to use a white background. It does not hurt the eyes and does not distract from the main content.
To create a quality navigation from scratch, you'll need a little knowledge of tags like
