How to create wordpress theme

If you work with WordPress, then definitely faced with the concepts of template and theme. What it is and why you need to? In this we will try to understand.

How to make a template?

If clear language, template WordPress are the files responsible for the presentation of your website in the browser. A set of these files gives information to the browser how and where to output data.

All theme files are divided into groups:

  • The style files with the *.css file extension. They are responsible for the size of the elements, their color, spacing, etc.
  • Theme files with a php extension. They are responsible for how and where to display the information.
  • File additional features functions.php permits to move or change the functionality of the official WordPress files and implement it into the template.
  • The images used for the theme.

All data files are stored in subdirectories of wp-content/themes/. Each theme has its own folder.

In the screenshot below presents a list of files included in the standard WordPress template:

If you want, you can edit the template through the admin panel, go to appearance-Themes:

This poses the question, why do we need pattern?

The main point is that it shares the system files and files responsible for the presentation of the site and its appearance.

So, they operate separately from each other. Why is it important? You can freely update the template or WordPress version without losing the original information (context, photo, video, data).

How to create a theme for WordPress?

Make a new topic page for the WordPress site is quite simple. It is not necessary to have deep knowledge in programming.

You need to use page.php code existing pattern in the substrate for the new. For example, there is the old standard theme, which page.php the file has this code:

This already written code that can be used to create a template from another page. But first, make sure that the code on top of the new file posted comment. This will allow you to identify this file as a page template:

Template your page will look like this:

Let’s try to create a basic page template in full width without sidebar. Sidebar page in the normal template appears to the right:

Without sidebar is very simple to create a template of the new page.

To do this, create a new file using any text editor (Notepad or Notepad++). Give it a simple name, for example, f ull-page.php or nosidebar-page.php.

Next, the upload of the file so that it was next to page.php file.

In fact, the template you have created from page.php the themes, taken as a basis, but with a remote code <?php get_sidebar(); ?>.

All of this is as follows:

Downloading the template file in the theme, it is possible to take as a basis for all pages. You can also snap a page to the template and remove the sidebar.

However, this is not the end. We only removed the sidebar. Further, it is necessary that the content was placed across the width of the page, instead of two thirds:

If you look closely at the template code, it becomes clear that most of the content is influenced by one CSS class:

For style most of the content meets part class=”site-content”. Checking the file style.css themes, you can see that this class is almost at the bottom:

To expand on the whole page content will have to change the width of the content area to 100% from 65%.

But it is impossible to change the class content of the site. This will affect all the records occupying the full page hosted on your site.

It is therefore necessary to create a new class that is used for pages with full width:

Updating the style.css file with the above class, you must modify the template with the full width of the page and check that the reference to the CSS class with 100% width posted:

The final pattern will have the following form:

Updated the template and check how the page appears on the website:

Great, everything works.

Summary

Everything described above can be performed in any WordPress template. You only need to remove from the new page template sidebar and verify the change is correct the stylesheet class.

Leave a Comment

Your email address will not be published. Required fields are marked *