WordPress Page Template. Complete guide. Different templates for WordPress pages or posts
The WordPress system allows you to easily create your own page template by slightly modifying any of the standard templates.
For example, now I want to make a template from a three-column theme, in which there will only be one sidebar - I need it to make wide text fields for photo album pages.
How to Make a Single WordPress Page Template
The entire process of creating a special template for a special website page consists of a couple of steps:
1. Create a php file for a draft template based on the standard one.
2. Template settings for a special type of site page on WordPress (you can do this on your computer or directly in the site admin panel).
3. When creating a new page or editing an existing one, select the resulting template for it.
Creationphp file for your page template
Download page.php file from the folder of the theme installed on the site. Located at:
/wp-content/themes/theme_name/page.php
Open, for example, in Notepad++.
At the beginning, before, insert the code for the name of the new page template:
Template Name: Album |
Settings for your website page templateWordPress
Here you can edit a new template either on your computer or in the admin panel. I prefer the second option, so that I can immediately see what happens (although this is an excuse - you don’t have to watch it on the website...).
So, you need to upload the album.php file to the same folder where your WordPress theme's default page.php page is located.
After downloading the file, go to the admin panel in the menu "Appearance" - "Editor" and on the right select a new file from the templates.
In the editing window you can see the code of the page, at the beginning of which our code for defining the name of the page template “Album” is located.
All that remains is to edit the template to your liking. For example, I need to remove the right sidebar. And then, however, I will need to add new styles so that the central column of the site becomes wider than in the standard page template (by the width of the remote sidebar).
If everything is simple with the sidebar (you need to delete its code and that’s it)…
...then with styles everything is a little more complicated. I won’t invent or bother creating new classes. I will only have a few pages - wide ones - for photo albums, so I will write the styles directly in the template file for the new page album.php.
By the way, this is what happened after removing the right sidebar code (space was freed up, but the central field did not expand, because it has a fixed width).
In Google Chrome it’s convenient to look at the code of a page element, so I quickly find that a block with a central field has postcont id(in my template). And the block with the page text itself is content.
You need to add new styles to them, that is, just increase the width (size = page width – left sidebar width).
Here they are, my dears, in the code of your album.php page template file:
I didn't need the content style because it doesn't have a width specified at all, it's just a nested block in postcont. !
important– a required parameter in such cases, because I haven’t looked and don’t know what is written there in the styles, and my new styles should take precedence. In principle, everything is already ready. Now the page in the new template looks like this: On the right, the text field is “stuck” against the right border and stretches to the width of the right sidebar. It’s not very visible here, because there are still spaces for old, small photos, but when I replace it, I’ll add the appearance here. Update from 10.20.14: I’m adding, as I promised at the beginning of the year, a screenshot of the page with photos. Yes, so much has happened since then. February 17 is the last peaceful day before the rapidly different events that followed... And finally the final stage (which I already showed a little in the screenshots above). When creating a page or editing one that already exists on the site, you can select a custom template on the right. Select the “Pages” menu and “Add new” or click on the one you want to change. On the right in the “Template” menu, change the “Basic template” to the new “Album” and save or publish the page. Now that's really all! Photo © Nancy L Misiewicz. A Romp in the Woods Other interesting posts WordPress Page Templates are designed to give your pages a personalized look. Most often, all pages have one template, or a variant of the template with or without a sidebar. Agree, this is not enough for a flight of fancy. In this tutorial we'll look at the best way to create your own page templates. A WordPress theme can have several different templates for displaying pages, posts, archives, and so on. Among the templates, we are now considering templates for Pages. When creating a Page in WordPress, you can choose a special template for it: Different themes may provide different page templates, such as a template for a full-width page (without a sidebar), with a left sidebar instead of a right one, and so on. The absence of this option when editing pages means that the theme has not declared additional templates. Page templates can be used for more than one page, and some themes create very specific templates that are meant to be used just once. When using a child theme, you can also place page templates in the root directory or subdirectory, and if an update to the parent theme is released, your files will not be affected. If using your template you only change the style and not the structure of a particular page, then you can do this without using additional templates. WordPress has a helper function body_class() that is used in most existing themes. Using the classes output by this function, you can change the style of any one page using CSS code: /* Hide the sidebar on page 123 */ body.page-id-123 #secondary ( display: none; ) Page templates should also not be used to change parameters in the main WordPress loop, such as adding a custom post type or excluding a category. For such purposes, there is a special filter pre_get_posts in WP_Query() . If you have any questions about working with page templates in WordPress, I will be glad to answer them in the comments. Creating a page on WordPress is one of the main steps when developing a website. This is no problem for professionals, but problems may arise for beginners, those who have recently discovered this amazing content management system. A page is one of the main parts of a WordPress website. We will tell you how to make a page and how it can be used in that article. In order to create a page on WordPress, you need to click on the “Pages” menu item in the admin console and select “Add new”. You will be taken to , which is the same as the editor for adding entries. It has all those functions, and you can also switch between two types of editors - text and visual. You will need to come up with a name for the page and fill in its content. In addition, if you have the All in one SEO pack plugin installed, the page can be SEO optimized. To do this, you need to write the title, description and keywords in the appropriate lines. Just like posts, pages can be published or saved as a draft. You can set the publication date to be earlier if you need to publish pages backdated, or later if you want to schedule future publications. Read about it. Similar to posts, you can add a thumbnail image to a page. But unlike posts, pages cannot be assigned to any category or assigned tags. If you want to create a hierarchy of pages, you can use the parent and child page options. The pages may be filled with some text, images, or other content. Then it will be a static page - it will not change arbitrarily. The page may also output some HTML code, as is the case when adding a contact form or sitemap. These can be either dynamic or static pages, depending on the functions of the code. On WordPress, the home page is always created automatically, and there is no need to create it additionally if you are going to display the latest posts on it. If you need to display some static or specific page on the main page, then you need to create it first. Pages can be added to the site menu, in the admin panel item “Appearance” – “Menu”. And this menu can be placed on the website. WordPress post types are the widest field for developers. WordPress natively includes 5 main post types: post, page, attachment, revision, and navigation menu. Posts and pages are the main types of posts for posting content on a website. And there are several differences between them. Posts, typically appear in reverse order on the blog's home page, and pages appear without a publication date. Categories and tags can also be attached to posts, but not to pages (although this can be done in the settings). Pages can be structured in order. This is especially useful for organizing content for site owners and visitors. Page designs can also be easily changed by using different page templates. They will allow you to change the style of any page on your site. Let's take a closer look at what page templates exist and how they can be used for a website. WordPress themes typically use a template page.php, which defines the style of all pages on the site. Most theme developers create a home page template using the same principle. This template displays the content of the page and by default determines which design elements will be present on it (for example, header, sidebar, footer, etc.). By default, the page template (page.php) is configured in such a way that all the necessary content is displayed on the page. Creating a unique page template allows you to go beyond WordPress standards and change the display of content on your site to your liking. For example, you could redesign your pages by removing the sidebar. You can also change the default font and use a different header than the one offered by the home page. The most famous custom page template is Archive(archive page template archive.php). It is available in many WordPress themes and contains all the site content, which is divided into pages, categories, tags, archive dates, author archives. Many archive templates also display a full list of blog posts and a field to search for posts on the site. Essentially, an archive template is a sitemap that helps a user find what they are looking for. You can find other types of page templates in themes, such as: The page template possibilities are endless. It all depends on how convenient you want to make your site for the end user. Adding a page template is very easy. In the page editor on the right you will see a window (widget) called “ Page Attributes" It is located under the window " Publish». In the page attributes, you can select the parent page and the order in which it will be placed on the site in the corresponding field. And the option between them allows you to change the template. All you need to do is select a template for the page and update it. The template can also be changed in another way - through the list of all pages. You just need to click on " Properties». Then change the template in the menu options on the right. Template options will not appear if your theme only uses a standard page template. Creating a new page template for your WordPress site is easier than you think. To do this, you do not need to have experience in developing and creating themes or plugins. You just need to use the code page.php an existing theme template as the basis for a new page template. For example, let's say you're using the old default Twenty Twelve theme. File page.php has the following code:
You can use this code to create a new page template. To do this, you just need to make sure that the code comment is placed at the top of the new file. This will define this file as a page template: /* Template Name: My Custom Page Template */ Your page template will look like this:
Let's walk through the process of creating a basic page template and try to create a full-width page template without using a sidebar. The Twenty Twelve theme comes with a full-width template out of the box, but we'll pretend it doesn't because we need it for our tutorial. In the standard template, the page sidebar is displayed on the right side: Standard page template in the Twenty Twelve theme It's easy to create a new page template without a sidebar. First you need to create a new file using any text editor (Notepad or Notepad++ will do). It can be called something simple, for example, nosidebar-page.php or full-page.php(we'll talk about file names a little later). Then upload the file to your site so that it is located next to the page.php file. Essentially, our template is a template from page.php Twenty Twelve themes, code removed only. It looks like this:
Once the template file is loaded into your theme, it can be used for all pages. You can also link a page to this template to remove its sidebar. But that is not all. So far we have only removed the sidebar. We need to make sure that the content is posted across the entire width of the page. In the meantime, it only takes up two thirds of the page: If you look at the code in our template, you'll see that the bulk of the content is under the influence of a specific CSS class:
The second part class="site-content" is responsible for the style of the main part of the content. If you check the style file ( style.css) topics, you can notice that this class is located almost at the very bottom: Site-content ( float: left; width: 65.104166667%; ) In order to expand the content to the entire page, we need to change the width of the content area from 65% to 100%
. But there is no need to change the site content class, because it is still used in other templates, such as the standard page page.php and post template single.php. Changing the percentage number for site content will affect all posts and pages on your site that fill the full width of the page. So we need to create a new class that is used specifically for full-width pages: Site-content-fullwidth ( float: left; width: 100%; ) After updating the file style.css With the above class, we need to change our template to full page width and make sure we reference the CSS class at 100% width:
Our final template will look like this:
This updated template confirms that the content on our site will be displayed full page: Now the content on the site is displayed across the entire page Everything mentioned above can be done in any WordPress theme. To do this, remove the sidebar from the page template you created and make sure you change the correct stylesheet class. According to the WordPress Template Hierarchy, WordPress displays templates for a page in the following order: It will be easier for you if you have an idea of the order of these patterns, because this way you will understand why the page is designed in a particular way. This order means that WordPress will always display a template for a page if one has been attached to it. If no templates have been added to the page, then WordPress will look for page-(slug).php. If the template page-(slug).php is not found, WordPress looks for the template by page ID. For example, if page ID = 15, then WordPress will look for a page template called 15.php. If the template is not tied to the page and there are no matches with the page ID, then WordPress searches using the standard page template page.php. And if the template page page.php does not exist, then index.php is used for searching. Many developers name their theme templates using the page-name.php format. For example, a contact page template is called page-contact.php. By and large, you can name the templates at your discretion and use any configuration, be it page-name.php, name-page.php or name.php. In any case, you will be able to change these names in the future. A similar task may arise when you need to have different page templates in terms of design within one site. The simplest situation that comes to mind: hiding ads/banners in featured articles; or suddenly you want to delete lists of similar notes or, say, some elements in some publications. Today I will teach you how to do this. This is not the first time I have returned to this issue; I wanted to collect all the nuances and knowledge in one place. Fortunately, modern methods are as simple as possible compared to past modifications. You don't even need to install additional modules like before. WordPress developers are really simplifying and improving the system. So today let's look at: In theory, all you need in this case is to place some code at the very top of the corresponding file: The first line indicates the name for the WP admin panel, the second determines the types of posts in which this layout can be used (in the example: post, page and product). That is, in fact, you just need to make one new WordPress page template, which will set the rules for displaying information on the site for all notes with content. However, it all depends on whether the codes in single.php and page.php are different - if so, then you will have to modify each of them. General algorithm of actions: 1. Using the FileZilla FTP client, go to your hosting in the directory with the name of the installed theme wp-content/themes/theme_name(or child). 2. Copy the file used to display posts/pages (single.php and page.php) to your local computer. 3. Rename, for example, to page-new.php or page-noads.php, etc. (the name does not matter). 5. Upload the new version back to the hosting in the same directory. Now go to the system admin panel, open any publication for editing and look for the following block there: The name displayed here is specified in the Template Name line. By the way, it’s convenient that it’s available, that is, you can change the page template for several objects at once. Go to the “All entries” item, where you mark a couple of articles and select “Edit” in “Actions”. After making your selection, don’t forget to click “Update”. If you look carefully at the installed theme, you will see that standard functions are used to display basic elements: get_sidebar, get_header, get_footer. If you modified your layout but left them there, the site will display the same content as the main layout. Let's look at the simplest situation - we have a new, corrected page.php, but we also need to make some adjustments in the sidebar. In this case, instead of get_sidebar, I use the construction: Of course you need to create the corresponding file sidebar-category-noads.php. Although, theoretically, you can immediately write code in a new layout without include, but this way the structure becomes less clear. It is clear that the trick is applicable not only to these three blocks on the site, but also to any others - carefully study the source codes that you use in your work. There are essentially two ways here. I personally prefer the simpler one - open a single post single.php in the editor and place the code: In_category checks which section the publication belongs to: if with ID=5, then single-category5.php is loaded, otherwise single-forall.php. Of course, these two files should be added to FTP in advance (you can again copy them from the source and slightly correct them) + any names are allowed. The second option has been considered. You need to place the following code in functions.php: /* * Define a constant path to our single template folder */ define(SINGLE_PATH, TEMPLATEPATH . "/single"); /** * Filter the single_template with our custom function */ add_filter("single_template", "my_single_template"); /** * Single template function which will choose our template */ function my_single_template($single) ( global $wp_query, $post; /** * Checks for single template by category * Check by category slug and ID */ foreach(( array)get_the_category() as $cat) : if(file_exists(SINGLE_PATH . "/single-cat-" . $cat->slug . ".php")) return SINGLE_PATH . "/single-cat-" . $cat- >slug . ".php"; elseif(file_exists(SINGLE_PATH . "/single-cat-" . $cat->term_id . ".php")) return SINGLE_PATH . "/single-cat-" . $cat->term_id . ".php"; endforeach; ) After that, in the theme directory, create a new folder “single” like /wp-content/themes/your_theme/single/ where do you upload files whose names have the following format single-cat-(category-slug).php, for example: single-cat-news.php or single-cat-articles.php. I have not personally tested this method, but the source is reliable. Finally, 2 small comments. Sometimes it happens that in a premium theme in the admin panel there is no choice of layout for posts (posts), and instead the developers have implemented formats. In this case, you can use one of them for alternative information output. The method, of course, is not the most competent, but it works. Don't forget to make edits to the appropriate file. The second trick is when you need to hide/show the widget depending on the selected layout option. In this case, the conditional operators is_page_template or has_post_format also come to the rescue. Total. I repeat, if you need to create different templates for pages and posts in WordPress, but page.php and single.php themselves are different, then you make your own “copy” for each of them. When their structure is the same, the new capabilities of the system allow you to create just one layout, where in the Template Post Type description you simply indicate the types of objects with which it will work. If you have questions about the main part of the note, and about additional nuances, write below, and I will try to answer.And
Settings of your template for site pagesWordPress
What are page templates
How to create your own page template
When not to use page templates
How to make a page on WordPress
Also, if your website template supports different display options, you can select them in WordPress when creating the page.What can you do with a WordPress page?
Why not use different page templates?
How to choose a template for a page?
Creating a basic page template for the site
How to name page templates
Different page/post templates in WordPress
/* * Template Name: NoAds Single Page * Template Post Type: post, page, product */
?>
Choosing a Page Template in WordPress
Different sidebar, header, footer and more
Individual post templates by category
/* * Define a constant path to our single template folder */ define (SINGLE_PATH, TEMPLATEPATH . "/single" ) ; /** * Filter the single_template with our custom function */ add_filter("single_template" , "my_single_template" ) ; /** * Single template function which will choose our template */ function my_single_template($single) ( global $wp_query, $post ; /** * Checks for single template by category * Check by category slug and ID */ foreach ((array ) get_the_category() as $cat ) : if (file_exists (SINGLE_PATH . "/single-cat-" . $cat -> slug . ".php" ) ) return SINGLE_PATH . "/single-cat-" . $cat -> slug . ".php" ; elseif (file_exists (SINGLE_PATH . "/single-cat-" . $cat -> term_id . ".php" ) ) return SINGLE_PATH . "/single-cat-" . $cat -> term_id . ".php" ; endforeach ; )
Additional nuances
The last notes
