Content Views one of best plugins displaying posts and pages on WordPress. With its help, you can display any website pages in the form of colorful announcements with the addition of thumbnails (images). Page display may contain title, description, author, publication date. It is also possible to display certain headings, entries by categories and tags. The Content Views plugin is capable of implementing almost any idea a webmaster has for displaying posts. In this article you will find the following information"Conclusion latest entries on WordPress", "Output of posts from WordPress thumbnails" and "Displaying posts by id on WordPress."

Other. Here we configure how to open an element when clicking on the title, thumbnail or next button: in a new or current tab.

On my subjective view free version Content Views plugin works well enough high level. Buy pro version no need, standard features The plugin perfectly displays almost any combination of posts and pages.

If you don’t know how to display pages or posts on your WordPress site in a beautiful and original way, Content plugin Views will help you with this. There is no need to delve into the code, just configure the display of content and the plugin will automatically display the pages you need in a separate article or widget.

WordPress is an easy drug in the world of web development. Many people who started using this platform were initially looking for an easy (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? For WordPress users It's normal to want more and more aspects of managing your site. Want a unique design, proven functionality, customization of all details.

Fortunately, WordPress system designed exactly for this purpose. Its flexible structure as well as modular architecture allows anyone to change almost anything on their website.

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. Do you want to make a completely different header for home page? Easily. An additional sidebar that will only appear on the blog page? No problem. Unique page 404? Please!

If you want to learn how WordPress page templates can 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.

To explain in more detail: 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 depends on the hierarchy WordPress templates. You can see what this hierarchy looks like in the screenshot below.

The template hierarchy is a list of familiar WordPress template files 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 index file.php. 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 better template available (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 there is a need to change the design, appearance, and functionality of individual sections of the 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 will 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 won't 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 certain pages. We'll look at each of these methods in turn.

Using Conditional Tags in Standard Templates

The easiest way to make changes is to separate page is the use of 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 the front page of your site, as set in Options - Reading.
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 standard tag 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 add small changes into 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 file page-about.php 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 a higher 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 any from this list available templates WordPress. 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 page templates is not a complicated process, but there are some details to consider. 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 at the moment already used for the required page in your theme. It's easier to change it already existing code than writing 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 make the 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 the 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 these templates can be used, I'll show you some interesting use cases.

Five Different Ways to Use Page Templates

As mentioned earlier, page templates can be used for a variety of 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 the 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 doesn't 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 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 choose portfolio as the slug for your custom post type, the page does not need to 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 in 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!

Parsing and filling the index file php WordPress, get acquainted with some functions and transfer some HTML template to the WordPress index.php file

In the last article we moved part of the design from static HTML file into a WordPress template, thereby filling the header.php file. Now it's time to sort out the contents standard file index.php WordPress and transfer some more of the layout from HTML to WP.

Contents of the standard WordPress php index file

Before you start filling out the index.php file, it would be best to briefly explain how it works and what the functions contained in it do.

Standard WordPress php index file from Twenty Twelve 1.8 theme

We will use it as the basis for the index.php of our Start WP theme.

In the code I only cut out the description in order to shorten it. So, now in order:

Includes the header.php file in index.php, thereby combining our template into one whole.

A conditional tag that checks whether there are publications for the current request. Read on and see what will be displayed if there are no suitable posts.

If there is something to output, the loop starts

Loops in WordPress are needed to display pages and posts. And depending on the page the visitor is on, the loop will return the corresponding content from the database.

For example, if the visitor is on the main page, the content that you specified in the settings console will be displayed. Either this static page, or records. If a visitor is on a category page, entries corresponding to that category are displayed. If the visitor is on a page with a post, the post itself is displayed, and so on.

/* Start the Loop */ — Just a comment, the theme developers marked the beginning of the loop. And it is translated accordingly as “the beginning of the cycle.”

while (have_posts()) : the_post(); — Start of the cycle

get_template_part("content", get_post_format()); — The contents of the page content.php are displayed, in other words the contents of the loop (we will get acquainted with this content later).

The content of the cycle can consist of the title of the post, category, page, content itself, date, category name, tags, author, and so on.

Function page navigation.

This is what I wrote about above. If there is no content suitable for the visitor's request, then the output of various, I will call them auxiliary, templates and service functions begins.

For example, Show different messages for a registered user who can add entries:

This is the end of the conditional check tag, the very first one in the have_posts() code. Like a closing tag in HTML, only here it means the end of the function.

Functions for calling the sidebar and footer of the template, respectively.

Creating the main markup of the index.php WordPress file

Enough theory, let's start marking up our Start WP template. Since we are making a website using Bootstrap grids, we need to mark up all files accordingly. We have already marked up the header.php file and even filled it out, now it’s time to move on to the index.php file

Let's open our theme's index.php file and add standard content to it. Copy the code given and paste it into the index file. Just leave our description from previous classes.

After you paste the code, WordPress will display an error like this:

Please note key phrase, which the server gives us - Call to undefined function twentytwelve_content_nav() This means that there is a function call on the page, but the server cannot find the function itself. This calls the pagination function, but since we haven't written it in the functions.php file yet, just comment it out like this for now:

Now the error has been fixed, and we will write the function itself later.

Let's remove it altogether for now, or better yet comment out the entire WordPress cycle Thus:

And immediately under

let's put our html markup from sources:

I did not publish the entire code, it is quite large, everything is marked with comments in the source code. See screenshots.

Later we will spread this code snippet throughout different files, some of them will be replaced with WordPres functions. For now it should look like this, without a sidebar and footer.

Recently one of our readers asked if there was a way to add content from WordPress pages to another page or post. In this article, we will show you how to insert content from one WordPress page into another post, page, or any custom post type.

First of all, you need to install and activate the Insert Pages plugin. After activation, simply go to the section Posts » Add new administrative panel site in order to see it in action.

If you are using a visual editor, you will notice new button in the menu called 'Insert Page'.

Clicking on it will bring up a pop-up window where you can select the page, post, or custom post type you want to add.

You can choose how to insert into a post/page by clicking on Options. By default, you can add a title, content, link, or choose a custom template. We will tell you more about custom templates later in the article.

After selecting a post/page, click on the button Insert Page. Plugin to add the shortcode required to display the post/page you have selected.

If you are using text editor to compose your posts, the shortcode can be inserted manually. The shortcode options are quite simple.

The page parameter for the shortcode accepts the page slug or its ID. Please note that slug can be any type of post, not necessarily a page.

You can also specify the entry ID. We have already written about how to find out the ID of a post in WordPress.

Adding Custom Post Types to Blog Entries

Using WordPress, you can add any type of content by creating post types for various types content.

The Insert Pages plugin allows you to add custom types posts to pages and blog entries. For example, you can create a custom post type for an image gallery, and then use Insert Pages to add those galleries to your posts or pages.

In the same way, you can create custom post types for videos, portfolios, customer reviews, etc. to add them to posts/pages.

Using custom templates to display inserted pages

Insert Pages allows you to display the title, link, content, or all fields for inserted pages. However, some users may need more fine tuning output. This can be achieved by using custom templates.

All you have to do is create an empty one php file and upload it to your theme folder. The file can be named whatever you like. For example, custom-author.php.

This custom template works exactly like any other content template file in your theme. Below is an example of the template file we created to display author pages.

You can use custom CSS classes in your template file and then apply styles in the theme's stylesheet file. We used the following code to design the author page.

H3.author-name ( font-size:16px; ) .author-thumbnail ( float:left; padding:10px; ) .author-bio ( font-style:italic; font-family: Lora, Georgia, Serif; )

This is what the final version looks like:

We hope this article helped you add content from one WordPress page/post to another.

Hi all. Today we will talk to you about the files that make up a WordPress template, as well as the order in which the template contents are loaded in a web browser. We need all this knowledge to confidently edit any template built for WordPress. So, what we need: at a minimum, to know how it works and which files are responsible for what. Having studied the structure of the WordPress template and having basic knowledge HTML and CSS, you can edit the theme template, change it appearance and functionality, without fear that after your changes the template will stop working. But, first things first.

WordPress CMS Template Files

• index.php- the most important one in the template wordpress file. It determines the visual arrangement of site elements. It is he who is responsible for displaying the main page.
• page.php- The file responsible for outputting the WordPress page.
• single.php- Record output page file.
• sidebar.php- Side column or otherwise called the sidebar of the site.
• header.php- Site header.
• footer.php- Basement or bottom part blog (footer).
• functions.php- A file where additional functions of the WordPress template are written (for example, registering menus and sidebars).
• category.php- File for outputting entries from a category.
• comments.php- Comment output file.
• archive.php- Archive of articles.
• searchform.php- search form template.
• search.php- display of search results.
• attachment.php- output of the attached file.
• 404.php- 404 error page when the user requests a non-existent page.
• tag.php- displaying notes on a specific tag (label).
• author.php- output of articles by one author.
• style.css- a file responsible for styling your WordPress theme.

You can see all these template files on your blog. To do this, go to the site admin panel/Appearance/editor:

On this page in the right column are all the files of the current . When you click on any of the files in this list, it will open for editing.

WordPress template structure

To visually understand the structure of the template, I suggest you look at the following screenshot, which shows the component parts of the site and the files responsible for their content:

Since WordPress template themes create different developers, then the structure of these templates may differ slightly. Some template files in mandatory are present on every web page, others are displayed only in certain cases.

So, now we can consider each file separately.

WordPress template index.php file

Some of you already know, and some of you are hearing about this for the first time - this is the main file of your template. Yes, yes, it is from this that all other theme files are launched by default. It in its own way repeats the category.php file, because by default in WordPress a dynamically changing page is displayed on the main page, but a static page can also be displayed, this all depends on your management system settings.

When rendering the front page, WordPress looks for the frontpage.php file. If there is no such file, the home.php file will be used. If home.php is not in the folder, then index.php is used. In the majority WordPress themes present, only index.php.

The first line of this file includes the site header or header.php file:

After this line, as a rule, the main block of content is connected, which can be accompanied (depending on the template manufacturer) by various div blocks of design and codes of various gadgets, like bread crumbs, number of post views and comments, etc.

">/*display post titles as a link*//*function for displaying the category in which the article is located (attached).*//*function for outputting the content itself, recording.*/

This file ends with the connection of the footer (site footer):

All. The index.php file ends here. In you can read about the rest of the template files on WordPress.