How to display content on the main page. We parse and fill the index php WordPress file. WordPress CMS Template Files

WordPress is an easy drug in the world of web development. Many people who started using this platform were initially looking for a convenient (and free) way to create a simple website. All this can be done with a little Googling and the advice provided in the WordPress codex. Basically, “I just wanted to try it and it all worked out.”

However, many users do not stop at simple acquaintance. Instead, they begin to actively use the system. They come up with more ideas. They are experimenting. Trying new plugins. Open Firebug. All. The point of no return has already been passed. Do you agree, is this similar to your story? It's normal for WordPress users to want more and more aspects of managing their site. Want a unique design, proven functionality, customization of all details.

Fortunately, WordPress system designed exactly for this. Her flexible structure, and the modular architecture allows anyone to change almost anything on their site.

Among the most important tools regarding full control site, you can mark page templates. They allow users to radically change the design and functionality of their website. Want to make a completely different header for your home page? Easily. An additional sidebar that will only appear on the blog page? No problem. Unique page 404? Please!

If you want to know how templates WordPress pages will help you solve these problems, read on. However, first we will give some basic information necessary to understand how page templates work in WordPress.

WordPress Templates

What do we mean when we talk about templates in the context of WordPress? In short, templates are files that tell WordPress how to output different types content.

More detailed explanation: Whenever someone makes a request to view part of your site, the WordPress platform determines what content the user wants to receive and what part of your site should be displayed.

WordPress will then try to use the most suitable template available in your theme for this part of the site. Which one exactly depends on the hierarchy of WordPress templates. You can see what this hierarchy looks like in the screenshot below.

The template hierarchy is a list of familiar ones WordPress files templates that are ranked to determine which file has the highest priority.

You can think of this hierarchy as a decision tree. When WordPress tries to decide how to display current page, it goes down the template hierarchy until it finds the first template that matches the requested page. For example, if someone tries to access http://yoursite.com/category/news, WordPress will look for a matching template in this order:

1. category-(slug).php: in in this case category-news.php
2. category-(id).php>: If the category ID is 5, WordPress will try to find a file called category-5.php
3. category.php
4. archive.php
5. index.php

At the very bottom of the hierarchy is the index.php file. It is used to display any content that does not have a specialized template. If a template ranks higher in the hierarchy, WordPress will automatically use it to display the requested content.

Page Templates and Their Uses

For pages, the standard template is the page.php file. If there is no more suitable template (such as archive.php for archive pages), WordPress will use page.php to display the content of all pages on your site.

However, in most cases it becomes necessary to change the design, appearance, functionality individual areas site. In this case, page templates are used. Custom page templates allow you to customize any part of your site without affecting the rest.

You may have already seen this in action. For example, many today WordPress themes come with options to display your pages in full screen, add an additional sidebar or change its location, etc. All this is usually implemented through templates. There are several ways to do this, and we'll look at them next.

First, however, a word of caution: Since working with templates involves editing and modifying your active theme files, we recommend that you use a child theme to make these adjustments. This way your changes will not be overwritten when the parent theme is updated.

How to Change Any Page in WordPress

There are three main ways to use custom page templates in WordPress: adding conditional statements to an existing template; creating a template for a specific page that will rank higher in the hierarchy; as well as direct assignment of templates to specific pages. We'll look at each of these methods in turn.

Using Conditional Tags in Standard Templates

The easiest way to make changes for an individual page is to use conditional tags in its template. As the name suggests, these tags are used to create functions that are executed only when a condition has been met. In the context of page templates, this is like, “Do action X only on page Y.”

Typically, conditional tags are added to your theme's page.php template (unless you want to change another part of the site). They help you make changes just for home page, home page, blog page, or any other page on your site.

Here are some common conditional tags:

1. is_page(). Points to a specific page. Can be used with ID, title, and URL/title.
2. is_home(): Applies to the home page.
3. is_front_page(): applies to home page your site, specified in the “Options” – “Reading” section.
4. is _category(): Conditions for the categories page. Can be used with ID, title, URL/title, just like the is_page() tag.
5. is_single(): for single posts and attachments
6. is_archive(): condition for archive pages
7. is_404(): Applies only to 404 pages

For example, if you add page.php to the template instead of the standard get_header(); the following code, you will get a custom header called header-shop.php when displaying the page http://yoursite.com/products.

If (is_page("products")) ( get_header("shop"); ) else ( get_header(); )

Good example using this code: if you have a store on your site and you want to display a different header image or a modified menu on the store page. You can make the appropriate changes to header-shop.php to ensure this all appears on your site.

However, conditional tags are not limited to just one page. You can set several conditions at once:

If (is_page("products")) ( get_header("shop"); ) elseif (is_page(42)) ( get_header("about"); ) else ( get_header(); )

In this example, we have set two conditions that will change the behavior of various pages on your site. In addition to loading the header for the store already mentioned above, we load header-about.php on the page with ID 42. For all other pages the standard header will be displayed.

Creating Page Templates in the WordPress Template Hierarchy

Conditional tags are a great way to make small changes to your page templates. Naturally, you can create larger modifications based on several conditional statements. I find this solution very cumbersome and inconvenient, and I would choose to create custom templates instead.

One way to do this is to use the WordPress template hierarchy. As we have already seen, WordPress will go through the list of all possible templates and select the first template that matches the requested page. For pages, the hierarchy looks like this:

• Custom page templates
• page-(slug).php
• page-(id).php
• page.php
• index.php

First come the arbitrary page templates that were directly assigned to this page. If at least one such template exists, WordPress will use it regardless of the existence of other templates. We'll talk about custom page templates later.

WordPress will then look for a page template that includes the slug for the page in question. For example, if you include the page-about.php file in your theme files, WordPress will use this file to display your About page or any other page found at http://www.yoursite.com/about .

You can achieve the same thing by specifying your page ID. For example, if the same page has an ID of 5, WordPress will use the page-5.php template if it exists; This will only happen if there are no page templates that have more high priority in the hierarchy.

You can find out the ID of any page by simply hovering over its title in the All Pages section of the WordPress backend. The ID will be in the link displayed by your browser.

Linking custom page templates

In addition to the templates that WordPress can use automatically, you can always bind custom templates to various pages. As you may have learned from the template hierarchy, custom templates are the highest in priority.

As with linking templates to specific pages, you will need to create a template and link it to the page you planned to use it for. The latter can be done in two ways that you may already be familiar with. Just in case, we'll show you how to do it.

Linking a custom page template via the WordPress editor

IN WordPress editor you can find a field called Page Attributes. It contains a list of Template.

You can choose from this list any available WordPress templates. Simply select the appropriate template, then save or refresh your page.

Setting a custom template via quick editing

The same can be done without going to the WordPress editor. Go to the All Pages section and hover the mouse cursor over any item from the list. A menu will appear on the screen, which will include a Quick Edit item.

Click on this item to edit page parameters directly from the list. You'll see the same drop-down menu allowing you to select a page template. Select a template and update the page. Ready.

Not so difficult, right? However, what if you don’t have a custom page template yet? How to create it? Don't worry, we'll discuss this in the next section.

Step-by-step guide to creating custom page templates

Creating custom templates for pages is not like that difficult process, however, it needs to take into account some details. Let's look at this process step by step.

1. We are looking for a standard template.

A good way to start creating a custom page template is to copy the template that is in this moment already used for the required page in your theme. It's easier to change existing code than to write an entire page from scratch. In most cases this will be the page.php file.

If you are unable to determine which template is being used for a given page, you can use the What The File plugin.

I'll use the Twenty Twelve theme as an example. This is what the standard page template looks like in it:

As you can see, nothing interesting: regular calls header and footer, as well as a loop in the middle. The page will look like this:

1. Copy and rename the template

After defining standard template we will need to copy it. We will use the duplicate to contribute necessary changes to our page. We will also need to rename it.

You can name the file whatever you want. The main thing is that it does not start with reserved theme file names. You shouldn't name the file page-something.php or something similar because WordPress will think it's a custom template.

It is best to name the file so that it reflects the essence of the template. For example, my-custom-template.php. In our case, we'll call it custom-full-width.php.

1. Changing the template title

Now we need to tell WordPress that this new file is a custom page template. To do this, we'll simply adjust the file header:

The Template Name will appear in the Page Attributes section of the WordPress editor page. Make sure you change it to your own.

1. Setting up the code.

Now it's time to work with the template code. In our example, we will remove the sidebar from the demo page.

This is relatively easy to do - just remove get_sidebar(); from the page template. As a result, my template looked like this:

1. Loading the page template

After saving the modified file, we need to upload it to the site. Custom page templates can be stored in different places:

• Folder with your active (child) theme
• Folder with your main parent theme
• Subfolder in a folder with any theme (both parent and child)

I prefer to create a page_templates folder in child theme and place all arbitrary templates in it. This is the easiest way for me to access modified files.

1. Activating the template

Last step: we need to activate the page template. As stated earlier, this is done in the Page Attributes → Templates section in the WordPress editor. We save, view the page - and see our new template in action (without the sidebar):

Not so difficult, right? Don't worry, you'll be able to sharpen your template making skills in no time. To give you an idea of ​​exactly how you can use these templates, I'll show you a few interesting options use.

Five Different Ways to Use Page Templates

As mentioned earlier, page templates can be used for various purposes. You can customize almost every area on any page. The only obstacle on this path will be your imagination (and coding skills).

Template for displaying pages in full width of the screen

The first case we'll look at is an expanded version of the demo template we created above. We have already removed the sidebar by removing get_sidebar(); from code. However, as you can see in the screenshot, the page still did not display in the full width of the screen, since the content section remained left-aligned.

To fix this, we need to work with the CSS, especially this section:

Site-content ( float: left; width: 65.1042%; )

The width attribute sets the width of our content to 65.1042% of available space. We want to increase this value.

If we simply change the width value to 100%, then in the end all pages of our site will be displayed in the full width of the screen - we don’t need this. Our first step is to change the class of the div with id=primary in our custom template. You can change it to class="site-content-fullwidth". Result:

Now we can adjust the CSS for our custom class:

Site-content-fullwidth ( float: left; width: 100%; )

As a result, the content will occupy the entire screen:

Dynamic 404 pages with widget areas

A 404 page appears when a user tries to access a page on your site that does not exist. This happens as a result of a typo, an incorrect link, or because the permalink to the page has been changed.

Even though no one likes receiving 404 pages, they play an important role for your website. Their content is often the deciding factor in whether a person will immediately abandon your site or try to look for other content on it.

Writing 404 pages from scratch is quite a difficult process, especially if you are not very experienced. It's best to embed widget areas into your template so you can flexibly change the content displayed on the screen.

Especially for this, we will take the 404.php file that comes with the Twenty Twelve theme (remember the template hierarchy?). But before we change anything in it, let's create new widget by pasting the code into the functions.php file:

Register_sidebar(array("name" => "404 Page", "id" => "404", "description" => __("Content for your 404 error page goes here."), "before_widget" => "

", "after_title" => "

This will output our new widget in the WordPress backend. To make sure it actually appears on our site, we need to add next line code to the 404 page file in the appropriate location:

In my case I want to replace the search form with get_search_form(); in the template to the widget area. This is what it looks like:

After uploading the template to the site, we can fill in the new widget area:

If we now go to the 404 page, we will see new widgets:

Page template for displaying custom post types

Custom post types are a great way to present content that has its own data sets, design, and other settings. A popular use case for these types of posts is review elements: books, films, etc. In our case, we want to create a page template that will display portfolio items.

First we need to create our custom post type. This can be done manually or through a plugin. I can recommend the Types plugin for this. It will allow you to easily create custom post types and custom fields.

Install and activate Types , add a custom post type, make it a “portfolio” slug, configure the fields you require (for example, adding a thumbnail), adjust other options and save.

Now that we have the portfolio post type, we need to display it on the site. The first thing we will do is create desired page. Please note that if you have selected portfolio as a slug for your arbitrary type records, the page should not have the same slug. I settled on clients-portfolio and added some additional text.

After adding a few elements to the portfolio section, we need to display them on the page right after the main content.

To do this we use a duplicate of page.php. Let's copy the file, call it portfolio-template.php and change its title:

However, in this case we will need to make some changes to the original template. If you look at the page.php code, you will see that it calls another template, content-page.php (get_template_part('content', 'page');). In this file we will need the following code:

As you can see, the title and content of the page are called here. Since we also need them in the portfolio section, we will copy these fragments into our page.php template. The result will be as follows:

Get_header(); ?>

To display the portfolio items on our page, we will need to add the following code right after the_content() call:

"portfolio", // enter custom post type "orderby" => "date", "order" => "DESC",); $loop = new WP_Query($args); if($loop->have_posts()): while($loop->have_posts()): $loop->

As a result, a custom post type will be displayed on our page:

It doesn't look that pretty, so let's add some styling here:

/* Portfolio posts */ .portfolio ( -webkit-box-shadow: 0px 2px 2px 0px rgba(50, 50, 50, 0.75); -moz-box-shadow: 0px 2px 2px 0px rgba(50, 50, 50, 0.75); box-shadow: 0px 2px 2px 0px rgba(50, 50, 50, 0.75); margin: 0 0 20px; .portfolio-image ( display: block; float: left; margin: 0 10px 0 0; max-width: 20%; ) .portfolio-image img ( border-radius: 0; ) .portfolio-work ( display: inline-block; max-width: 80%; ) .portfolio h3( border-bottom : 1px solid #999; font-size: 1.57143rem; margin: 0 0 15px;

It's much better now, don't you think?

Here's all the code for the portfolio page template:

Members page with avatars

The next example of using our template is the members page. We want to list the authors of our site, including their images, as well as the number of posts they have published under their name. The end result will be as follows:

We'll start with the same hybrid file as before and add code to it to display a list of participants.

The default Twenty Fourteen theme comes with a default members page. You can find this template in the page-templates folder called contributors.php.

However, if you look in this file, you will only find the following call: twentyfourteen_list_authors();. Clearly, this is related to the function contained in the theme's function.php file. We are interested in the following fragment:

"ID", "orderby" => "post_count", "order" => "DESC", "who" => "authors",)); foreach ($contributor_ids as $contributor_id) : $post_count = count_user_posts($contributor_id); // Move on if user has not published a post (yet). if (! $post_count) ( continue; ) ?>

We'll add it right below the_content() call and get the following result:

Now let's set some styling:

/* Contributor page */ .contributor ( border-bottom: 1px solid rgba(0, 0, 0, 0.1); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box- sizing: border-box; display: inline-block; padding: 48px 10px; solid rgba(0, 0, 0, 0.1); float: left; margin: 0 30px 0 -168px; .contributor-avatar img( border-radius: 0; ) .contributor -summary ( float: left; ) .contributor-name( font-weight: normal; margin: 0 !important; ) .contributor-posts-link ( background-color: #24890d; border: 0 none; border-radius: 0 ; color: #fff; font-size: 12px; line-height: 10px 30px 11px; contributor-posts-link:hover ( color: #000; text-decoration: none; )

Ready. Thank you Twenty Fourteen!

Changed archives page

Twenty Twelve comes with its own own template for archive pages. It will be used, for example, if you try to view past posts from a certain category.

However, I would like to do something more interesting, like Problogger: a page that allows people to get additional content different ways. This is done, again, using a page template.

We can add the following code just below the_content() in our file, which is used for examples:

Archives by Year:

Archives by Month:

Archives by Subject:

You'll also need some styling for the search:

Archive-search-form ( padding: 10px 0; text-align: center; )

The result will be as follows:

Here's the entire file so you can understand what's what:

Don't forget to link this template to the page!

Not long ago a manual was published about. It was in the nature of acquaintance at the initial stage, but also included practical examples. I would like to continue this direction, just pay attention to the pages. The material on this topic is multifunctional, that is, very large. Therefore, it will be difficult to open all the features of a page template in one article. But at least we will try to touch on indirect details and, of course, the main parameters.

Page Hierarchy

Hierarchy means a sequence from the highest level to the very bottom, or vice versa. In our case, this is the same order of authority of the template files for the page. When a user lands on one of your pages, WordPress displays its content based on the page creation option (more below).

Custom template– denoted conditional comment at the top inside a file with a random name.

page-slug.php– a template with the name of the page (shortcut). If a custom template was not specified, then WordPress uses this type as the main one.

page-id.php– unique page identifier.

page.php – standard file responsible for the content of the pages.

index.php – index file. If WordPress does not find any of the templates listed above, then by default it will be responsible for the pages.

Attention. There is also a page template in WordPress called paged.php, however, it is not used to display single post pages, rather to display a list of pages in post archives.

Create a custom template for mass use

There are several options for creating a template with their pros and cons, almost insignificant. This option, which we will now consider, is the most common. The first step is to create php file or duplicate the standard page.php . Then save it under a different name, for example, templates_my.php. Then add a comment at the top of the file:

The next step is to upload the file to your theme, go to the admin panel in the “Pages - Add New” tab or you can open an existing one. In the page attributes, select which template will be used on this page.

If suddenly you don’t have the “Page Attributes” panel, then just check the box in the screen settings in the upper right corner to display it.

Mass use means that this type of template can be applied to any pages of the site. As opposed to specialized, which was created with a specific page identifier or label.

Advice. A template created in this way can be located in a subfolder current topic. Thus, without taking up extra space and creating a compact look.

Important. Do not use the prefix page- as the name of the template page. Because WordPress will interpret the file as a specialized one, which clearly only applies to one page.

Custom Page Templates

The second method is only for certain pages without exception. Let's give an example of old scheme. Let's say you have a page called "Portfolio", by default its label is translated into the English word "portfolio". This can be seen in the “Page-Properties” settings. Now we simply duplicate the page.php file and rename it to page-portfolio.php.

The ID is created in exactly the same way, only the page ID is substituted for the label. He is in address bar, the “Pages-Edit” section looks like this post=9 . In the same way, the standard file is duplicated and renamed to page-9.php.

Important. A template of the same type, which is created only for specific page cannot be located in theme subfolders. Exactly the same as in child themes.

Practical example of creating a page template

Now, as an example, let’s create a template based on the first option and change the loop in it by adding the output of categories with records. Open any editor, add the code below, save it under the name template_my.php, and upload it to the server.

Now you need to write styles in the style.css file

My_main ( box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); margin: 20px auto; padding: 15px; background: #fff; width:1000px; ) .page_cat ( margin: 0 9px 20px; padding: 15px; vertical-align: top; width: 28%; .page_cat h2 ( color: #676767; font: bold 18px arial; margin-bottom: 20px; ) .page_cat li a ( text-decoration : none; color: #2879af; display: block; ) .page_cat li ( margin-bottom: 6px; padding: 3px 3px 3px 10px; display: block; ) .page_cat li a:hover ( text-decoration: underline; ) . page_cat li:nth-child(2n) ( background: #f7f7f7; )

There is only one thing left to do: in the admin panel, in the “Pages-Edit” tab, specify our previously created “example template” template in the page attributes.

Result.

Conditional page tags

In the final paragraph, we will consider several conditional tags. They are written in the standard page.php file.

Displaying elements on specific pages

/images/img.png"/> /images/img.jpg"/> /images/img.jpg"/> /images/img.jpg"/>

information output