Pinegrow WP is a web editor for creating WordPress templates. Editing a WordPress template: how to change the theme to suit your needs

Facebook

Editing a template is difficult, but necessary. I’ve been thinking for a long time about changing the template to another, as I wanted some space, but without bells and whistles. But I didn’t want to take the one I liked and install it, so I decided to delve deeply into its template code, correct it a little: remove unnecessary elements, add the necessary working code. In addition, I want to make my template easier by speeding up its loading. For me, this is the most difficult task, since sometimes I have to cut to the quick and remove a lot of plugins that made my life easier.

To edit the template, I have already laid the foundation, now I have to take the first file for development. I will open the index.php file, since it works like a skeleton in the installed WordPress template: it indicates to all other files the order and time of loading into the user’s browser. Having opened this file with Notepad++, I pay attention to the first line.
I see the following code

It means that the header.php file is loaded first when generating a blog page. Please note that there is nothing written before this line. Now, to edit and adapt the template, I open the header.php file.

At the very beginning of work, I look at the number of lines in the files: in the index.php file there are 49 lines, but 17 are empty, and in the header.php file there are 58 lines, of which 31 are empty. When I finish editing the template, I will remove all the empty lines, the browser will save time when loading the page when reading the codes - this is such a minimal work on adapting the template for the blog.

Before editing the index.php and header.php files, I change the document encoding to UTF-8, I talked about this in the previous article “Editing a WordPress template”

Line 1 – very important for document verification, it confirms that the page is written in the correct language, guided by accepted standards. I’m not worried about this line – it is and let it be. I'm moving on.

I'm paying attention to line 2 - browser

Below this code is a large container containing 8 lines that I also have to deal with.

I draw your attention to line 4,

1	; charset= " />

which I will replace with the string

1	< meta http- equiv= "Content-Type" content= "content=" text/ html; charset= UTF- 8 " />

It tells browsers and search engines that the pages on this blog are written using UTF-8 encoding, but again, why would I need the extra load.

We continue to further optimize the template - line 5 or title of the page. It is very important for search engine optimization of a blog. Therefore, I am obliged to use it, but here, too, its filling is implemented using PHP code. This is how this code works

And now a small digression. The fact is that I use the All in One SEO Plugin for search engine optimization of my blog. With its help, I write all the title, description, and keywords for the blog itself, and for each individual page. Here is the code

First part of the code

pulls the post title from the blog database, the second part of the code

Now when I open a blog page, the title of the post will first be displayed in the title, separated by the blog name. The same thing, but minus one more request.

Line 6 contains the file connection

I recently wrote a note about him. I must write the path to this file, starting with the domain name.

In your version, you can only change the address if you edit the blog template for yourself.

Line 8 – must specify the absolute path to the xmlrpc.php file.

It is short, seemingly harmless, but when the main blog page is generated, it will load a lot of code: page navigation plugin styles, captcha plugin, All in One SEO Plugin, wp-syntax, Google Analytics, topsy. You can load properties and styles of other installed plugins. In addition, working scripts are output from the CMS WordPress wp-includes folder.

There is only one conclusion. I have to evaluate the need for each such plugin for the blog, and decide whether it is needed or put under the knife. As an example, I can’t do without the All in One SEO Plugin; I spent a lot of time looking for the wp-syntax plugin. They load my blog, but the return on them is great.

But without WordPress plugins

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

Menus 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

".__("Leave a Comment", "flat-white")."

"; ?>

" class="read_more">

text Leave a Comment replaced by

The last extension we need to consider is templates. Exactly the template in CMS Joomla 3, and in any other version determines the appearance and appearance of the site. Thanks to templates, you can radically change the design of your website, spending a minimum of time on it; all you need to do is download and install a ready-made template, and decide on the location of the modules.

But before you start installing a new template, you should figure out what, or rather, what files Joomla 3 templates consist of.

What does a Joomla 3 template consist of?

For templates in Joomla there is a special folder “templates”, in the root of which each template has its own folder of the same name. Without exception, all templates consist of files, and the number of these files may differ for different templates. But there are also standard files, without which not a single template will work:

index.php– index file, it determines the structure of the site
templateDetails.xml– this file contains all the information about the template and is used to install the template through the control panel
Style files (.css)– with their help, the design of pages is determined

In addition, templates may contain script files (.js), images, languages and much more. The screenshot below shows a set of files that make up the standard “Protostar” template:

What are the templates?

There are quite a large number of types of templates; they can be classified according to the frameworks in which they are written or other parameters, but all types of templates can be divided into two large categories:

Website templates– change the appearance and design of the site
Control Panel Templates– this type of templates is intended specifically for the control panel; they do not affect the site in any way.

Working with Joomla 3 templates

We’ve sorted out the types, storage location and template files, now let’s talk about how to work with templates using the control panel. First, let's go to the "Templates: Styles (Site)" section ("Extensions" -> "Templates") and see which templates are already present in the basic assembly of CMS Joomla:

On the “Templates: Styles (Site)” page you can see that we have at our disposal two templates Beez3 and Protostar, the latter is set by default for all pages of the site, pay attention to this because in Joomla the same site can consist of several templates. And you can assign your own template to different sections of the site, thereby making the site more attractive.

Let's open one of the templates for editing and see what can be edited and how:

On the first tab with the name “Details” we see some information regarding this template, and then the developers write to us that the template uses the Bootstrap framework.

The next tab “Advanced settings” contains the basic settings of the template, here we can change the color of the text and background of the site, logo, title fonts and other settings:

And the last tab is “Menu Linking”, with its help you can assign a template for the entire site or for specific sections. We simply mark those menu items for which this template will be defined:

Positions of modules in a Joomla 3 template

In the lesson on Joomla modules, we said that they are displayed on the site in strictly defined positions, the so-called module positions. For each specific template, the number and location of these positions is different.

How to find out or where to look at module positions in Joomla 3? Joomla provides a special preview for this, but by default it is not available (turned off) and must be enabled in the settings.

In order to enable the display of module positions in Joomla 3, on the “Templates: Styles (Site)” page, click on the “Settings” button. After this, we will be taken to the “Template Manager Settings” page, on which we set the “View module positions” switch to the “Enabled” position:

After that, go again to the template manager page – “Templates: Styles (Site)” and click on the icon with an eye located just to the left of the template name:

On the page that opens, you can see all the module positions available in the template and their location. In the future, this information will help to display certain modules in them.

Creating your own module positions

We have already learned how to view existing module positions, but what if the template does not contain exactly the position we need? In this case, you can create your own position for modules in a ready-made Joomla template. The process is not complicated, but it does require editing certain template files − index.php And templateDetails.xml.

In the first file we indicate where the new position for the modules will be located, in the second we will tell the engine that this position is present in the template and can be worked with.

Let's move from words to action, first open the file templateDetails.xml, which is located in the template's root directory. There is no point in delving into its essence now, we are only interested in the positions for the modules, they are declared between the lines<position>module-position-nameposition> (lines 28-47 of the Protostar template). By default there are 18 of them:

In order to declare our position of modules, add an additional line (or several lines) of this type:

my-module-position

We save the file, you can close it, the main thing is to remember the name of the position under which you declared it.

Now open the index.php file and add a new DIV block to it, which will be a container for the new position of the modules. As an example, I decided to create a new position for modules in the footer of the site. Write the following code in the footer:

Div>

That’s all, the position has been created, you can go to the “Template Manager” section and check its availability. My index file code turned out like this:

Let's look at the code that is responsible for outputting the module, it starts with the line:

Now we need to specify the module position name that we specified in the templateDetails.xml file:

The style of the module code is determined by the style parameter, which has several design options, by default “none”, in this case the module title will not be displayed on the site pages.

The final result of the code that is responsible for displaying modules at a certain position, as you already understood, looks like this:

This is how you can create your own module positions in absolutely any Joomla 3 template. As you can see, the process is not at all complicated.

Advanced Joomla 3 template options

We have already looked at the basic template settings, learned about module positions and how to view them in Joomla 3. Now let's talk about advanced template settings, see where and how to change template files and create overrides for modules, components and layouts.

On the “Editor” tab, we can (if we know how) change the template files at our discretion, thereby remaking the template for ourselves, changing it beyond recognition. We just change the files, save and check the result. How to edit template files will be discussed later in the lesson on creating your own template.

The next tab that interests us is the “Create Override” tab. Here we can redefine modules, components or site layouts, and later change them at our discretion without making changes to the original files:

How to create an override is written in detail in the article “Overriding in Joomla 3”, but at this stage we just need to understand where and what is edited in the template.

On the last tab “Template Description” there is a little information about this template; we are not interested in this tab.

From the author: Welcome, friends, to another article on the topic of WordPress. If you are faced with the task of changing something in the theme code on your WordPress site, then I think the article Editing a WordPress Theme may be useful to you. In this article, we will try to learn how to edit a WordPress theme.

So, we were faced with the task of making some minor changes to the WordPress site. Moreover, these edits are in no way related to the texts of pages or articles, otherwise you would hardly be looking for an answer to the question in this article, but would simply edit the text of the article or page. No, we are talking specifically about changes that need to be made specifically in the code of your WordPress theme. For example, you need to change the image in the site header, add a statement about the authorship of the article or, conversely, remove something from the output, or change the color of the link, font size or title, and so on. For all this, you need to delve into the theme code. Let's try to do this.

We are talking about small edits, and not about fundamental changes in the topic; in the latter case, you are better off asking your webmaster for help;

This article is not a universal recipe that will suit all themes without exception, since themes can be created in different ways.

As an example, I'll use the default Twenty Fifteen theme that comes with WordPress. Taking into account the comment above about the different ways to create themes, it is better to explain using one of the standard WordPress themes. Let's take a look at the theme folder structure.

As you can see, there are a lot of files here. Let's first take a look at the style.css file. This is the theme style file and, as a rule, it is where the theme design rules are stored. So if you need to make design-related edits, then most likely you need a style.css file.

Let's change the size of the article title headings as an example. Through the developer tools, we can find the rules in the style file that are responsible for the design of a particular element.

Let's open the style.css file in the editor and change the value of the font-size property for the article title from 3.9 to 2.9. Let's save the file, update it on the server and after refreshing the page we can see that the header size has become smaller. Using exactly the same scheme, we can change the design of any other element in the design of your theme.

content.php - the file is responsible for the central part of the site, that is, the content area;

For example, let's take the same article title and try to edit it a little. In the Twenty Fifteen theme, this is the second level heading (h2). Let's replace it with, for example, a third level heading (h3). To do this, open the content.php template, try to find the corresponding section of code and make changes. Here is the code:

After changing h2 to h3 and saving the file, we should see the corresponding changes on the site. Editing for other elements of your theme is done in the same way. Here I repeat again that this article is primarily about editing a WordPress theme, i.e. about making some minor changes to the structure of the topic or about changing the design. If you need to make drastic changes, then, as mentioned above, you have two options:

seek help from a webmaster, who will make the necessary changes to the theme for an appropriate fee;

Learn how to create themes yourself, in which case it will not be difficult for you to edit a WordPress theme yourself.

If you decide to choose the second option, then I can recommend studying our free course on creating themes for WordPress or. Well, I say goodbye to this. Good luck and see you again!

A WordPress template is a design for a corresponding management system with a special design for customizing websites. This is a completely ready-made HTML code, with laid out pages. The solution can be actively used to create and configure websites on a variety of topics.

How to open a WordPress template?

I want to immediately note that if you don’t understand anything about codes, CSS and HTML, then it’s better not to try to do anything. Your attempts to edit the template may lead to complete non-functionality of the site. It’s completely different if a lesson clearly describes the actions and stages of implementation, where it says where to copy and where to paste. However, be on the safe side and make a backup of your data so that you can restore the site to its original form at any time.

How to change WordPress templates?

WordPress template editing is carried out in several ways. Each of them has its own characteristics and is suitable for performing certain changes. Decide what you plan to edit in the template and choose a convenient way for you to implement this idea. I suggest considering them all.

Editing a WordPress Template

This method is convenient if you need to make small changes. Editing through the admin panel is quick, easy, and you don’t have to launch special programs to enter passwords. The only drawback is that the editor does not have line numbering or code highlighting, so complex and numerous edits will be inconvenient.

Editing files using the hosting file manager

Having a good hosting with an excellent file manager and a friendly interface, you can edit the template in it. This method also does not require launching additional programs, setting up connections, or copying information to a PC. And most importantly, the code is highlighted.

Files that are edited are located in the folder: /wp-content/themes/name_of_your_template/. Open it and look for the file you need to edit.

Editing a theme on ftp

If you are planning to seriously change your template, then use this method. Editing a theme via ftp should be used to work with several files located in different folders at once:

It will be better if a test version of the site was installed locally. This will allow you to make changes without risk and transfer the fully edited ones to the hosting. To edit files, I suggest using the free one Notepad++ editor with syntax highlighting. With it, you can easily delve into all theme files at once.

In the menu, specify the folder you want to find, or a function, or a word or tag, and Notepad++ will accurately show files that contain similar occurrences. And then select the file you need and make changes to them. Thanks to the available backlight, editing work will be easier and more convenient.

conclusions

As already mentioned at the beginning of the post, if you are not confident in your abilities and doubt the success of further editing, then it is better not to undertake it. But, understanding what and how to do, you can safely get to work.

Decide how complex the theme will be modernized and determine the most convenient editing method. But, just in case, make a backup copy so as not to completely lose your working template. If editing is unsuccessful, you can restore all data and launch the theme in its original form.