Home-Payment systems-Basics of proper editing of Wordpress templates. Pinegrow WP - web editor for creating WordPress templates

Basics of proper editing of Wordpress templates. Pinegrow WP - web editor for creating 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. File cascading tables styles. 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 the screen displays English text, 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 flat-white theme hides supporting information 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 replace with

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:

Type="modules"

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

Name="my-module-position"

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.

"We continued our review of TemplateToaster tools and looked at the innovations that appeared in the 5th version of the program compared to the 4th.

As you may have already understood, similar tools and their options are used to configure various elements of the website template. For example, effects, background settings, etc. There is no point in reviewing them again for each tab. Therefore, I will provide a link to the elements discussed in previous articles once, and in the future in the text I will simply skip such tools.

No. No side panels.
On the left is the sidebar. One sidebar to the left of the content area (column).
Right sidebar. One sidebar to the right of the content area.
Left Left sidebar. Two sidebars to the left of the content area.
Left right sidebar. One sidebar to the left of the content area, one to the right.
Right Right sidebar. Two sidebars to the right of the content area.

All tools in areas Background, Layout, Effects, were discussed earlier in the articles.

Region Height. Allows you to set the height of the side panels. Or 100% of the height of the main page area (content) – option Height 100% or the sidebar should adjust to the height of the content it contains. Option Equivalent to content.

On this tab (picture below) you will find tools with which you can customize the appearance of modules. TemplateToaster 5 Professional template editor provides you with a number of tools for this. Please note that the tab appears only when you enable the use of one or two sidebars on a tab , tool .

Moreover, the tools are divided into areas corresponding to the areas of the modules (picture below).

Container. Green frame in the picture below.
Hader. The blue frame is in the picture below.
. The red frame is in the picture below.

Region Container, tool Container properties . You can customize the outer and inner padding, borders (style, thickness, rounding radius, color) and shadow. All of these options have already been discussed previously, as well as the tool Background.

Region Hader. All tools in this area, including Header Properties(icons, external and internal margins, header type) have already been discussed in previous articles.

Region Tool Background has already been considered. Tool (picture below) in addition to the previously discussed settings, allows you to configure new elements.

Active link, Navigated link, Visited link. You can set the text design, similar to other text objects (style, size, color, etc.) discussed earlier, for three different hyperlink states.
Text. An option has been added for this element Indentation, which allows you to adjust paragraph indentation (not to be confused with line spacing).
Headings. The visual template editor allows you to set the style, font size (font size), family (typeface), color, indentation, effects, alignment, design (underlined, strikethrough). Moreover, this can be done for the header of each level (H1-H6) separately.
Numbered list. Setting the design of a numbered list. In addition to the already familiar font settings, you can choose a style. For example: 1, 2, 3; a, b, c and so on.
Unordered list. Customizing the design of a bulleted list. Font settings only.

Tool . Contains a set of pre-installed module design options (picture below).

To configure a vertical menu, a menu usually located in the sidebar, you will have access to options similar to those from the tabs Menu And .

I just want to give menu design options (picture below), depending on the selected “type” of horizontally expandable submenu: Mega, Vertical, Horizontal.

In this tab (picture below), the Joomla template editor provides you with a number of options for customizing the appearance of the most important thing that is on any site - content. Most of the tools and their settings have already been discussed previously. We will not touch on them, but will only focus on new ones.

Examples of preset content styles (presets) are shown in the figure below.

Region tool . In addition to the already familiar options, it allows you to adjust the line height in pixels (analogous to line spacing).

I would like to draw your attention to the fact that you can set several boundaries for content:

Blue solid line in the picture below. Region , tool – Border.
Black solid line in the picture below. Region Publication, tool Publishing Properties - Inner Frame – Border.
Red solid line in the picture below. Region Publication, tool Post Properties – Content Boundary.
Green dotted line in the picture below. Region Publication, tool Border.

Region tool Lists . Unlike lists in the module, for bulleted (unordered) lists you can specify the bullet icon and its color.

Region tool Table . Using the settings of this tool (picture below), the site template editor allows you to customize the appearance of site tables (not to be confused with CSS tables).

Table background. Table background color.
Table Margin. Indentation from the top, right, bottom, left edge of the table to surrounding objects.
Table Padding. Indentation from the top, right, bottom, left edge of the cell to the inner contents of the cell.
Table Header. Setting the background color and table header text.
Frame type. Single or double stroke.
Border. Table border style, thickness and color.

For those who make websites on Joomla, I suggest you read the article “Droptables Review. Creating a price list in Joomla,” which describes an extension that allows you to create beautiful and functional tables without programming knowledge.

Region Publication, tool . Here (picture below) the settings for managing the content of the content area are collected, which can be divided into “header”, “content” and “metadata”.

In the image below, the title is outlined in blue, the content is outlined in red, and the metadata is outlined in green.

Settings available for these areas (we'll only look at the new settings):

Show metadata. Shows\hides metadata.
Inner frame. It is possible to set a frame for the title and/or metadata. You can change the type, color, width and radius of the frame, add a shadow, change the background and inner/outer padding.
Content fields And Content indentation(better “Content Indent”). The padding from content to the content area border and the padding from the content area border to the content (almost the same thing).
Post image. Allows you to add an image to the material and customize the appearance of the frame that frames it.
Post on the main page. This is a kind of page layout control like “Category Blog” (in Joomla). An example of such a page is a category page with reviews. You can select the value “0” - do not display the full-width article at the top of the page (except in cases where the option Columns“1” is selected), “1” – display the article at the top of the page in full width.
Columns. You can display content in 1, 2, 3 or 4 columns. Similar to newspaper columns.

Region Publication, tool Printing house. Similar to the previously discussed tools of the same name, but allows you to change the font properties of such content elements as:

Heading.
Title Hover. The title the mouse is hovering over.
Metadata.
Meta link. Hyperlink in the metadata area.
Hovered meta link. A hyperlink in the metadata area that the mouse is hovering over.

Region Publication, tool . The website template editor allows you to set an icon for the following elements:

Post title.
Author.
Date.
Seal.
email Mail.

These icons appear above the material (for example, on this site there is a print icon at the top). You can choose one of the available icons in the TemplateToaster 5 Professional library, giving it a color, or specify your own image.

In the next article “TemplateToaster Professional Review. HTML template generator » we will look at the positions of modules, settings for the appearance of various controls and the footer (site footer or footer).

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: Upper 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:

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

Open your WordPress admin.
Next select Appearance-Editor.
The column on the right will contain all the template files that can be edited. Select the file you need, change it and click Update.

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:

Launch your client ftp. You can use Total Commander or FileZilla to connect the client ftp. Check the connection to your site and open your template folder: /wp-content/themes/name_of_your_template/
Copy the file you plan to edit to your local disk.
Open this file in a code editor program and you can safely make all the necessary changes.

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.