Editing a WordPress template for dummies. Basics of proper editing of Wordpress templates


Each design theme has a number of settings that can be changed from the panel CMS management. 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 which part of the site each of them is responsible for, you can easily edit the design CMS template"for yourself."

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. File forms home page site and calls other theme files.

2. header.php. Creates the top, “header” of the site - usually it contains a logo, name, description of the web resource, as well as 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 mandatory basis WordPress template, but usually there are 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 much 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 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 custom menu There's only one 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 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 theme is flat-white supporting information hides in following lines 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

Attention! Using a visual editor to edit a website template unavailable in versions from 14.0. In earlier versions you need to be very careful: unexpected code corruptions may occur. It is recommended to edit the template in HTML code mode.


Using the visual editor, you can change the site template.

Design template- This is the appearance of the site, which determines the arrangement of various elements on the site, the artistic style and the way pages are displayed. Includes HTML program code, graphic elements, style sheets, additional files for displaying content. May also include component templates, finished page templates, and snippets.

Attention! It is highly recommended not to use complex components in a website design template.

Note: To use the visual editor when editing a template in versions prior to 14.0, check the option Use a visual editor to edit website templates in settings Main module (Settings > Product Settings > Module Settings > Main Module):

Editing a template

To edit a site template, follow these steps:


In both cases, a form for editing the selected template will open:


Now you can proceed directly to editing the site template.

When using a visual editor in the mode of editing website design templates, the toolbar includes another additional panel - the panel Editing a template. This panel contains auxiliary tools for editing the website design template.

Editing template service areas

There is a button on the template editing panel Edit template service areas ( ) , when clicked, the editing form opens:

This form consists of two tabs: Top part And Bottom part, which serve to edit the top and bottom parts of the website design template, respectively. In addition, the form has a button that can be used to restore the default contents of service areas.

Adding a Work Area

To add a workspace Work Area The site template contains a button - Template delimiter #WORK_AREA#. When you click on it, a shortcut will be added to the editor workspace, which displays the template's appearance. The placement of this shortcut determines the location of the working area of ​​the site pages.

Note: Without Work Area The template cannot be saved.

Template preview

The button allows you to view the resulting template in the public part without saving changes, i.e. After watching, you can always go back and correct the parts you didn’t like. When you click the button, the template is displayed in a separate window.

Working with code

Let's note some features of using PHP code in the template code. There are some subtleties when interrupting html code with a php script. For example, you can write like this:

" title="Visit the site">OurSite !}

Likewise with pictures (img tag).

We list the attributes that are processed for links and pictures:
for tag attributes: href, title, class, style
for tag attributes: src, alt, class, style
Those. instead of these attributes you can insert

The table code can also be interrupted by a PHP script:

If the template code uses pictures located in the template directory or deeper, then the path to the template folder will be replaced by the SITE_TEMPLATE_PATH constant:

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

1

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 is 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

Editing a template is a very convenient opportunity to change the appearance of pages of the same type (pages of one module). Once again, I would like to draw your attention to the fact that when editing a template, you are not changing a specific page of your site, but ALL pages of the same type at once. I hope this will be clearer with specific examples.

How to edit

Backup copy.

The very first thing you must do is create backup your template. If the changes made are incorrect, you can always return to the copy of the template that was created before editing.
To create a backup copy, you need to go to the Site Control Panel Design - Template Backup

Backup creates copies of all your website templates. We have already discussed earlier that on the Ucoz website there is a specific template for certain pages of the site.
Click " Create a backup" to create it. A new backup copy will be immediately created, which will be assigned its own 10-digit number. Of course, you won’t remember the numbers, but you can get your bearings by the date the backup was created. And yet, my advice is not to create too many copies, and delete old ones that are definitely no longer useful. Then it will be easier to navigate.

Click " Restore“so that your site takes on its previous appearance (the appearance of previously saved templates).

The structure of the uCoz website template

The template of any page of the uCoz website consists of:

  • HTML markup - HTML tags that determine the location of blocks on the page. The actual frame of the template.
  • uCoz system codes, which are enclosed in $…$. The list of system codes (with a decoding of their designation) that can be used in a specific template is located below the template editing field. Use this list as a cheat sheet, as sometimes it happens that you cannot use some system code in another template. Thus, the list of system codes ONLY matches the template under which it is located.

The picture conventionally indicates the location on the page: green - HTML tags; red - CSS styles; blue - uCoz system codes.

Editing a uCoz website template

Select the page template you want to change. Let me remind you once again that you will change all pages of this template. Let's take as an example a template from this site: Catalog of articles - Page of materials and comments to it.

So, to edit the template, go to: Control Panel - Design - Design Management (templates). Select the template you want and click on it.

There are several ways to edit templates:
1.Visual template editor. This method is suitable for making minor changes to the template. Change font color and size, change the arrangement of elements, add text.
Click the button to go to the visual template editor.

Now you can make the necessary changes. Here you do not need to know HTML and CSS, but you need to know the list of system codes and their meaning. The editing itself is very similar to Word or the simple visual editor uCoz.
Be sure to click the Save button to save your changes.

2. Changing the HTML code of the template. This method is suitable for making any changes to the template, up to completely changing the template, but you must have at least some understanding of HTML tags and CSS styles.
You can change the code directly on the code page, but personally I prefer to do it in a third-party HTML editor. I have already written several times that I prefer Dreamweaver. Therefore, I will tell you using the example of this program.

It's easy to edit a template in Dreamveaver, because on one side you see all the template code, and on the right is a schematic result:

Now I can safely change my template. I select the required area on the right, and the code responsible for this is also highlighted. This way it is easy for me to find the place I want to change, for example paste a script at a certain place. Soon, as an example, I will post a video on how to insert a script into a template.

If you want to be the first to know about new articles on the site!!!

Dear readers, in this article we will learn how to edit a WordPress template.
For those who are not yet familiar with the structure of a WordPress template, this article is a must read. The content of the article:

I see two main reasons why we need this:

  • Most blog settings involve editing code – html or css. In many of my articles, I write about the need to edit a specific theme file. If you don’t know how to search for these files and what is the most convenient way to edit them, this article is for you.
  • When creating a blog, you installed a theme (template) from the Internet on it and want to change something in it, add design elements or functional blocks. But to do this, you must have at least minimal knowledge of HTML and CSS. Regardless of whether you are a beginner or have experience in creating websites, to edit a WordPress template you must understand what it consists of and what each part is needed for. So first, let’s look at the structure of a WordPress template.

WordPress Template Structure

The WordPress template HTML code is split into several PHP files. This was done for convenience: pieces of code that are repeated on different pages are placed in separate files and connected to each page using the include function. The header, footer and sidebar are in separate files, and the file for each page type contains only the central area: The most commonly edited WordPress template files are:

  • index.php – The template starts with an index.php file that displays the main page of the site.
  • header.php - Website header. This file contains the top part that is repeated on each page of the site. It starts with a tag , contains completely , into which most scripts are inserted when setting up a blog. It opens a tag and the logo, slogan, top menu and other header elements are displayed.
  • style.css is the main style file of the template, which sets the appearance of the site elements. To edit a WordPress template, you most often have to work with this file.

Other files:

  • single.php – is responsible for displaying each individual entry. Those. the appearance of the page on which you are now reading my article is configured in this file.
  • page.php – output of a static blog page. New pages are created in the “pages” section in the left menu, and their appearance is configured in this file.
  • sidebar.php – is responsible for displaying the sidebar (blog side column), where the widgets are located. This part of the template is also repeated on every page of the WordPress site, so it is placed in a separate file. Usually you don't have to edit this file because all changes are made in the . However, no one forbids you to write some code directly into the sidebar.php file.
  • functions.php – file with theme PHP functions. All of them affect the appearance and operation of the site, and determine events for certain user actions.
  • footer.php – footer (footer) of the site, its lower part. This is also an element repeated on all pages. It usually contains traffic counters, copyright and contact information.
  • category.php – this file is responsible for displaying a page with a list of all posts in a certain category.
  • tag.php – output of an archive of posts for the corresponding tag is written in this file.
  • archive.php – an archive of all entries for a specific month (year) is configured here.
  • search.php – displays blog search results.
  • comments.php – displays comments on posts and pages.
  • 404.php – 404 error template – page not found.

Depending on the chosen theme, other files may appear in it, then you will have to independently figure out what they are needed for.

How to Edit WordPress Template Files

I want to warn you right away that you shouldn’t get into the code and try to remake it yourself if you don’t understand anything about CSS and HTML. It's another matter when some lesson says to insert a certain code into a certain place in the file. Be sure to back up your files and database before making any changes! To edit WordPress website theme files, I offer three options:


Setting up a WordPress theme in the admin area

If you downloaded and installed a ready-made WordPress template, then many settings can be made without getting into the code. You can edit each WordPress theme through the blog admin panel.

Go to the section "Appearance" — "Tune", a window with basic theme settings will open. Here you can enter the name and description of the site, which will appear in the site header after saving. You can also change the background color or background image and other settings - it’s not difficult to figure out. Most of the WordPress theme settings can be done in the section "Appearance" -> "Name of your theme".
Here you can upload your logo, favicon, etc. There are a lot of settings, but to be honest, I never use them, since it’s easier for me to work with code to edit a WordPress theme.

That's all! Choose a convenient method for editing a WordPress template depending on the situation and never forget to make backups. so as not to miss new useful articles.

P.S. I would like to remind you, dear readers, that if you notice errors in my articles, do not be lazy to click “ Ctrl + Enter"so that I can fix them with my help.


2024 gtavrl.ru.