WordPress content. Step-by-step guide to creating custom page templates


Content Views is one of the best plugins for 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: “Showing latest posts in WordPress”, “Showing posts with WordPress thumbnails” and “Showing posts by id in 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.

In my subjective opinion, the free version of the Content Views plugin works quite well high level. There is no need to buy the pro version, 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, the Content Views plugin will help you with this. You don’t need to delve into the code, just configure the content display and the plugin will automatically display the pages you need in a separate article or widget.


Sometimes it can be useful to hide and/or show some content in WordPress posts/pages depending on certain conditions. Conditions and situations vary. Let's say you are holding a competition on your website and the terms of the competition or its results should automatically appear on the site on the 17th of the current month. Or you distribute links on your site, but do not want everyone to see them, but only registered users of the site. Or you accept questionnaires on the website from the audience, but want to display the questionnaire on the website only from the 1st to the 10th of each month... Etc.

Of course, there are a great many plugins that manage WordPress content. Whether they satisfy all required situations is not clear. But doing this yourself (without using plugins) is not so difficult. We will use shortcodes - a simple set of functions for creating and using macro codes in the content of posts/pages. We'll code some typical situations Based on them, you can create your own special function.

For each situation we will need a shortcode function, it is usually inserted into the file functions.php current topic and an example of direct use in the body of a post/page.

Content is visible only to registered users

Some content on the page can be hidden from unregistered users (of course, robots will not see it either search engines). Usually they hide: links to download a file, an answer to a question, the rest of the content (in order to motivate users to register, etc.).

Function logged_in_user_content($atts, $content = null) ( if (is_user_logged_in() && !is_null($content) && !is_feed()) ( return $content; ) return "Available for registered users only"; ) add_shortcode("vizible ", "logged_in_user_content");

Only registered users will see this text. It will also be excluded from the search.

Visibility of content depending on the user's role on the site

Registered users also have different roles (). You can operate the content on your site if you use gradations of user access on your site:

Function content_by_user($attr, $content = null) ( $defaults = array("capability" => ""); extract(shortcode_atts($defaults, $attr)); if (current_user_can($capability) && !is_null($ content) && !is_feed()) ( return $content; ) return "You do not have enough rights"; ) add_shortcode("rolecontent", content_by_user");

Usage in post/page body:

This part of the content is visible to users with the appropriate rights on the site.

You can use the following options:

  • read- the content will be visible to everyone
  • edit_posts- visible to editors
  • manage_options- only for administrators

Visibility of content within a date range of each month

If you want to make part of the content visible in certain range dates of each month (say, from the 1st to the 10th), you can use the following shortcode:

Function content_countdown($atts, $content = null)( extract(shortcode_atts(array("ot" => "", "do" => ""), $atts)); $dt=date("j"); if ($dt>=$ot && $dt<=$do) { return $content; } } add_shortcode("data", "content_countdown");

Usage in post/page body:

We show users what will be available only from the 1st to the 10th (inclusive) of each month.

Visibility of content on a certain date of the month

It can be useful, for example, if on the 30th of each month you summarize some results. This is done in the same way as in the previous case, with some modifications:

Function content_countdown_data($atts, $content = null)( extract(shortcode_atts(array("chislo" => ""), $atts)); $dt=date("j"); if ($dt==$chislo ) ( return $content; ) ) add_shortcode("datas", "content_countdown_data");

Usage in post/page body:

This content will accessible to users only on the 30th of every month.

Visibility of content on a specific day of the week

Content can be hidden/showed on a specific day of the week (Monday, Tuesday, etc.)

Function content_countdown_w($atts, $content = null)( extract(shortcode_atts(array("chislo" => ""), $atts)); $dt=date("w"); if ($dt==$chislo ) ( return $content; ) ) add_shortcode("week", "content_countdown_w");

Usage in post/page body:

This content will Available only on certain days of the week.It is enough to specify in the parameter serial number days of the week: from 0 (Sunday) to 6 (Saturday)

Visibility of content only in a certain month of the year

To display content on your website in a separate month of the year (I’m not sure that anyone needs it, but still), we use the following shortcode:

Function content_countdown_month($atts, $content = null)( extract(shortcode_atts(array("month" => ""), $atts)); $dt=date("n"); if ($dt==$month ) ( return $content; ) ) add_shortcode("month", "content_countdown_month");

Usage in post/page body:

This content will be available to users only in the month of January. Specify the number: from 1 to 12.

Visibility of content in a range of months

What if you need to show/hide content only in summer or winter? Or in the first quarter of the year? We can make a shortcode like this:

Function content_countdown_months($atts, $content = null)( extract(shortcode_atts(array("ot" => "", "do" => ""), $atts)); $dt=date("n"); if ($dt>=$ot && $dt<=$do) { return $content; } } add_shortcode("months", "content_countdown_months");

Usage in post/page body:

Content will be available only in the first quarter of the year, from months 1 to 3 (inclusive).

Visibility of content after the date

You can hide content that your site visitors will see only after a certain date has passed. Such a code will be in demand for informing about the coming of the New Year, the end of a competition, a marathon on the site, etc.

Function content_countdown_day($atts, $content = null)( extract(shortcode_atts(array("month" => "", "day" => "", "year" => ""), $atts)); $remain = ceil((mktime(0,0,0,(int)$month,(int)$day,(int)$year) - time())/86400); if($remain > 1)( return $daysremain = "Days left - ($remain)"; ) else if($remain == 1)( return $daysremain = "Remaining 1 day"; ) else( return $content; ) ) add_shortcode("newyear", "content_countdown_day");

Usage in post/page body:

New Year! Let's celebrate!

If the shortcodes in the shortcode do not work

All of the above shortcodes are designed to hide/show some HTML code on your pages. But what happens if you enclose a shortcode in a shortcode? That's right, a nested shortcode won't work. This conflict will happen, for example, if you try to embed in a shortcode contact form, for example like this:

[contact-form-7 id="6122" title="Contact form"] !}

To get the shortcode to work in WordPress shortcode we need to replace just one line in the functions of the shortcodes given here. Line:

Return $content;

replaced by:

Return do_shortcode($content);

Everything should work!

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 of the site in order to see it in action.

If you are using visual editor, then 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 post types to pages and blog posts. 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 your own CSS classes in your template file and then apply the 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.

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. 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. 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. A unique 404 page? Please!

If you want to learn how WordPress page templates can help you solve these problems, read on. However, first we will provide some basic information needed 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 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 it becomes necessary to change the design, appearance, functionality of individual sections of the site. In this case, page templates are used. Custom Templates pages 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, adding an additional sidebar or changing 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 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 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 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 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 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 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 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 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 this moment already used for required page in your topic. 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: the usual header and footer calls, 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 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 of 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 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%; )

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 does not exist. This happens as a result of a typo, an incorrect link, or because the permalink to the page has been changed.

While 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.

Specifically for this, we'll use 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 a 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_widget" => "
", "before_title" => "

", "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->

"; echo "

" . get_the_title() . "

"; echo "
"; echo "
".get_the_content()."
"; echo "
"; endwhile; endif; ?>

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; padding: 30px; ) .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; font-weight: normal; margin: 0 0 15px; padding-bottom: 15px; )

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

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

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

" . get_the_title() . "

"; echo "
". get_the_post_thumbnail($id)."
"; echo "
".get_the_content()."
"; echo "
"; endwhile; endif; ?>

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; ) .contributor p ( margin-bottom: 1rem; ) .contributor-info ( margin: 0 auto 0 168px; ) .contributor-avatar ( border: 1px solid rgba(0, 0, 0, 0.1); float: left; line-height: 0; margin: 0 30px 0 -168px; padding: 2px; ) .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; display: inline-block; font-size: 12px; font-weight: 700; line-height: normal; padding: 10px 30px 11px; text-transform: uppercase; vertical-align: bottom; ) . 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:

Archives by Year:

Archives by Month:

Archives by Subject:

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

The Content Views plugin helps solve the problem of non-standard design of the main (and other) blog pages. By default, the site template displays blog posts one after another, starting with the newest one. By editing the template, you can set the display of the date, title, categories, author and some other parameters, but you won’t be able to change the logic for selecting posts (without adding special PHP code and functions). Therefore, today’s module can be useful to many beginners and WordPress developers.

It allows you to customize the display of posts on the main and other blog pages without any specialized programming knowledge - you can download it from here. The name on the repository page is somehow too long " Query posts by category… and display posts on page in grid layout without coding – Content Views", if you install WordPress through the admin panel, try searching for the Content Views key. The required WP version is higher than 3.3 and up to 4.2.2 (at the time of writing this post), the module has been downloaded by more than 10 thousand. times, the rating is almost maximum!

The capabilities of the module are quite large and concern not only the main page. With it you can:

  • display on main posts by category in responsive design;
  • display blog posts in 2/3 columns;
  • display posts in the required format on a specific page;
  • display notes on to the desired tag or the author;
  • For displayed entries, select sorting by title or date;
  • replace the standard navigation with a more beautiful one;
  • display thumbnails of different sizes in post announcements.

In principle, you could configure the display of the latest posts by category, which I mentioned when I mentioned (via WP_Query). But not every user will understand this, and the Content Views plugin greatly simplifies the task. Let's consider more detailed work with module.

After installation, a plugin section will appear in the admin panel Content View Settings. To create a new post display element, click on the “Add New” link.

Here the task is divided into 2 components:

  • Filter Settings — setting parameters for selecting records;
  • Display Settings - format for displaying posts.

In the first step, you determine the type of post - page or post. You can include or exclude specific IDs from the list. The Limit parameter determines the number of elements.

Just below in Advanced filters all the fun stuff happens. In the screenshot you see how I checked the Taxonomies parameter and set the selection by category. Next, I defined the category from which posts will be displayed. It is possible to make a selection according to several headings or exclude some from the general list.

In addition to the Taxonomies parameter there is:

  • Status — status of the displayed records. Attention! If you want to show only published posts, then also set this parameter (the Publish value).
  • Order & Orderby - sorting options.
  • Search—displays records by search phrase.
  • Author - selection for a specific author.

The Display Settings tab contains settings for the appearance of the block:

There are three display formats: Grid, Collapsible List, Scrollable List. For the “grid” you can choose the number of elements per column and/or 2 columns when displayed. Also mark the fields that you want to display for each element: date, title, text, thumbnail. You can choose to open the link in a new window.

All these settings allow you to get the right type displaying the latest posts for the main or other pages of the site.

After specifying all parameters, save the element. In the “All views” menu you can see a list of all created blocks and shortcodes for inserting them. You can post them on regular pages blog or in a template via the shortcode call function:

Finally, I would like to say that the plugin has Pro version, which has a slightly larger number of options and settings. It costs $29 for 1 or $89 for 5 sites. 2 is added here additional options display of Pinterest, Timeline, the display of the latest posts in the archives of categories, tags, authors is being completely replaced, WooCommerce support is appearing, the Drag & Drop mechanism is being added, as well as many different parameters for the appearance of blocks. Basically, free version It was enough for me to solve the problem of the original design of the main page of the WordPress site.







2024 gtavrl.ru.