How To Change Template Higherarchy
I like to retrieve of WordPress every bit the gateway drug of web evolution. Many people who get started using the platform are initially simply looking for a comfy (and costless) manner to create a simple website, ofttimes with the help of a WordPress page builder plugin. Kind of like "I'm just going to try it one time."
However, a expert chunk of users don't finish in that location. Instead, they get hooked. Come up with more ideas. Experiment. Try out new plugins. Discover Firebug. Boom. Soon there is no turning back. Does that sound similar your story? As a WordPress user information technology is only natural to want more and more than control over your website. To crave custom design, custom functionality, custom everything.
Farther Reading on SmashingMag:
- How To Create And Customize A WordPress Kid Theme
- Building A Custom Archive Page For WordPress
- Customizing WordPress Athenaeum
Luckily, WordPress is built for exactly that. Its flexible structure and compartmentalized architecture allows anyone to change practically anything on their site.
More than after jump! Continue reading below ↓
Among the about important tools in the quest for complete website control are page templates. They permit users to dramatically change their website's blueprint and functionality. Want a customized header for your front page? Done. An additional sidebar only for your web log page? No trouble. A unique 404 error page? Exist. My. Guest.
If you want to know how WordPress page templates can aid you achieve that, read on. Just first, a little background information.
Template Files In WordPress
What are nosotros talking about when nosotros speak of templates in the context of WordPress? The curt version is that templates are files which tell WordPress how to brandish dissimilar types of content.
The slightly longer version: every time someone sends a request to view part of your website, the WordPress platform volition figure out what content they want to meet and how that specific part of your website should be rendered.
For the latter, WordPress will attempt to employ the most appropriate template file found within your theme. Which one is decided on the basis of a set order, the WordPress template hierarchy. Y'all can encounter what this looks similar in the screenshot below or in this interactive version.
The template hierarchy is a list of template files WordPress is familiar with that are ranked to decide which file takes precedence over another.
You lot can think of information technology equally a decision tree. When WordPress tries to make up one's mind how to display a given page, information technology works its way down the template hierarchy until information technology finds the kickoff template file that fits the requested page. For example, if somebody attempted to admission the address https://yoursite.com/category/news, WordPress would look for the correct template file in this social club:
- category-{slug}.php: in this example category-news.php
- category-{id}.php>: if the category ID were 5, WordPress would try to find a file named category-v.php
- category.php
- archive.php
- index.php
At the lesser of the bureaucracy is index.php. It will be used to display whatsoever content which does non have a more than specific template file attached to its proper name. If a template file ranks higher in the bureaucracy, WordPress will automatically utilise that file in order to brandish the content in question.
Page Templates And Their Use
For pages, the standard template is commonly the aptly named folio.php. Unless there is a more specific template file bachelor (such as archive.php for an archive page), WordPress will utilize page.php to render the content of all pages on your website.
However, in many cases it might be necessary to modify the design, look, feel or functionality of individual parts of your website. This is where folio templates come into play. Customized page templates allow you to individualize any part of your WordPress site without affecting the rest of it.
Y'all might have already seen this at work. For example, many WordPress themes today come up with an pick to change your page to full width, add together a second sidebar or switch the sidebar'south location. If that is the case for yours, information technology was probably done through template files. There are several ways to accomplish this and we'll get over them subsequently.
Offset, however, a word of caution: since working with templates involves editing and changing files in your active theme, information technology's always a practiced thought to go with a child theme when making these kinds of customizations. That fashion you don't run the danger of having your changes overwritten when your parent theme gets updated.
How To Customize Whatever Page In WordPress
In that location are three basic ways to use custom folio templates in WordPress: adding conditional statements to an existing template; creating specific page templates which rank higher in the hierarchy; and straight assigning templates to specific pages. We volition take a look at each of these in turn.
Using Conditional Tags In Default Templates
An easy way to make page-specific changes is to add together WordPress's many conditional tags to a template already in use. Every bit the name suggests, these tags are used to create functions which are simply executed if a certain status is met. In the context of folio templates, this would be something along the line of "Only perform action X on page Y."
Typically, y'all would add conditional tags to your theme's page.php file (unless, of course, you lot want to customize a unlike part of your website). They enable you lot to make changes express to the homepage, forepart page, blog folio or any other page of your site.
Here are some frequently used conditional tags:
-
is_page(): to target a specific page. Tin be used with the page's ID, title, or URL/name. -
is_home(): applies to the dwelling house folio. -
is_front_page(): targets the front page of your site as ready under Settings → Reading -
is _category(): condition for a category page. Tin use ID, title or URL/name similaris_page()tag. -
is_single(): for unmarried posts or attachments -
is_archive(): conditions for archive pages -
is_404(): applies simply to 404 error pages
For case, when added to your folio.php in place of the standard get_header(); tag, the post-obit code will load a custom header file named header-shop.php when displaying the page https://yoursite.com/products.
if ( is_page('products') ) { get_header( 'shop' ); } else { get_header(); } A good utilize case for this would be if you have a store on your site and you need to display a different header paradigm or customized bill of fare on the shop page. You lot could then add these customization in header-shop.php and it would testify up in the appropriate place.
However, provisional tags are not limited to one folio. You tin can brand several statements in a row like so:
if ( is_page('products') ) { get_header( 'shop' ); } elseif ( is_page( 42 ) ) { get_header( 'about' ); } else { get_header(); } In this second example, ii conditions will change the beliefs of different pages on your site. Likewise loading the aforementioned shop-specific header file, information technology would now also load a header-about.php on a page with the ID of 42. For all other pages the standard header file applies.
To larn more than about the use of conditional tags, the following resource are highly recommended:
- WordPress Codex: Provisional Tags
- ThemeLab: The Ultimate Guide to WordPress Provisional Tags
Creating Page-Specific Files In The WordPress Hierarchy
Conditional tags are a great style to introduce smaller changes to your folio templates. Of course, you can also create larger customizations by using many conditional statements one after the other. I notice this a very cumbersome solution, notwithstanding, and would opt for designated template files instead.
One mode to do this is to exploit the WordPress template hierarchy. As nosotros have seen, the bureaucracy will traverse a list of possible template files and cull the get-go one it tin can find that fits. For pages, the bureaucracy looks like this:
- Custom page template
- folio-{slug}.php
- page-{id}.php
- page.php
- index.php
In first place are custom page templates which have been directly assigned to a particular folio. If one of those exists, WordPress will use it no matter which other template files are nowadays. Nosotros volition talk more near custom page templates in a chip.
Later on that, WordPress will wait for a page template that includes the slug of the page in question. For instance, if you include a file named page-nearly.php in your theme files, WordPress will utilize this file to display your 'Nearly' page or whichever page tin be found under https://www.yoursite.com/most.
Alternatively, you can accomplish the same by targeting your page's ID. So if that same page has an ID of 5, WordPress will use the template file folio-five.php earlier folio.php if it exists; that is, only if there isn't a higher-ranking page template available.
(BTW, you tin can find out the ID for every folio past hovering over its title nether 'All Pages' in your WordPress back-cease. The ID volition show up in the link displayed by your browser.)
Assigning Custom Page Templates
Besides providing templates in a grade that WordPress will use automatically, it is besides possible to manually assign custom templates to specific pages. As you can see from the template hierarchy, these volition trump any other template file present in the theme folder.
Just like creating page-specific templates for the WordPress hierarchy, this requires you to provide a template file and then link it to whichever page you want to apply it for. The latter can exist done in two different ways you might already exist familiar with. Simply in instance you aren't, hither is how to do it.
1. Assigning Custom Page Templates From The WordPress Editor
In the WordPress editor, yous find an option field called 'Folio Attributes' with a drop-down carte du jour under 'Template'.
Clicking on information technology will give you a list of available folio templates on your WordPress website. Choose the one y'all desire, save or update your page and you lot are done.
2. Setting A Custom Template Via Quick Edit
The aforementioned can besides be accomplished without entering the WordPress editor. Get to 'All Pages' and hover over any particular in the listing in that location. A carte du jour will become visible that includes the 'Quick Edit' particular.
Click on information technology to edit the page settings directly from the list. Yous will run into the aforementioned driblet-down carte for choosing a different folio template. Pick 1, update the page and you are done.
Non so difficult later on all, is it? But what if you don't have a custom folio template all the same? How practise you create information technology so that your website looks exactly the style you want it? Don't worry, that'south what the next part is all about.
A Pace-By-Pace Guide To Creating Custom Page Templates
Putting together customized template files for your pages is not that hard just here are a few details you take to pay attention to. Therefore, let's go over the process bit-by-bit.
1. Notice The Default Template
A good fashion is to kickoff by copying the template which is currently used by the page you desire to change. It's easier to modify existing code than to write an entire page from scratch. In most cases this will be the folio.php file.
(If you don't know how to notice out which template file is being used on the page you want to edit, the plugin What The File volition prove useful.)
I volition be using the Twenty Twelve theme for demonstration. Here is what its standard page template looks like:
<?php /** * The template for displaying all pages * * This is the template that displays all pages by default. * Please note that this is the WordPress construct of pages * and that other 'pages' on your WordPress site will use a * different template. * * @package WordPress * @subpackage Twenty_Twelve * @since 20 Twelve 1.0 */ get_header(); ?> <div id="primary" class="site-content"> <div id="content" role="main"> <?php while ( have_posts() ) : the_post(); ?> <?php get_template_part( 'content', 'page' ); ?> <?php comments_template( ', truthful ); ?> <?php endwhile; // end of the loop. ?> </div><!-- #content --> </div><!-- #primary --> <?php get_sidebar(); ?> <?php get_footer(); ?> Equally you can see, nothing too fancy here: the usual calls for the header and footer, and the loop in the centre. The page in question looks like this:
2. Copy And Rename The Template File
After identifying the default template file, it's time to make a copy. We volition use the duplicated file in guild to make the desired changes to our page. For that we volition too have to rename it. Tin can't have 2 files of the same proper name, that'due south just confusing for anybody.
You are free to give the file whatsoever proper name yous similar every bit long as it doesn't start with whatever of the reserved theme filenames. So don't be naming it page-something.php or anything else that would make WordPress recall it is a dedicated template file.
It makes sense to use a name which hands identifies what this template file is used for, such every bit my-custom-template.php. In my instance I will go with custom-full-width.php.
Side by side we have to tell WordPress that this new file is a custom folio template. For that, we will take to arrange the file header in the following fashion:
<?php /* * Template Name: Custom Full Width * description: >- Page template without sidebar */ // Additional code goes here... The name nether 'Template Proper noun' is what will be displayed under 'Folio Attributes' in the WordPress editor. Brand sure to adjust it to your template proper noun.
4. Customize The Code
Now it's time to go to the meat and potatoes of the page template: the code. In my example, I but want to remove the sidebar from my demo page.
This is relatively piece of cake, as all I have to practise is remove <?php get_sidebar(); ?> from my page template since that'due south what is calling the sidebar. As a event, my custom template ends up looking like this:
<?php /* * Template Name: Custom Full Width * description: >- Page template without sidebar */ get_header(); ?> <div id="chief" form="site-content"> <div id="content" role="main"> <?php while ( have_posts() ) : the_post(); ?> <?php get_template_part( 'content', 'page' ); ?> <?php comments_template( ', true ); ?> <?php endwhile; // finish of the loop. ?> </div><!-- #content --> </div><!-- #primary --> <?php get_footer(); ?> 5. Upload The Page Template
Later on saving my customized file, it is now time to upload it to my website. Custom page templates can be saved in several places to be recognized by WordPress:
- Your active (child) theme's folder
- The folder of your main parent theme
- A subfolder inside either of these
I personally like to create a folder named page_templates in my kid theme and place whatever customized templates in in that location. I find this easiest to retain an overview over my files and customizations.
6. Activate The Template
As a last footstep, you need to activate the folio template. Every bit mentioned earlier, this is done nether Page Attributes → Templates in the WordPress editor. Save, view the folio and voilà! Hither is my customized page without a sidebar:
Non so hard, is it? Don't worry, yous will speedily get the hang of it. To give you lot a amend impression of what to utilize these folio templates for, I will demonstrate additional use cases (including the code) for the residuum of the article.
Five Different Means To Use Page Templates
Equally already mentioned, page templates can be employed for many different purposes. You tin can customize pretty much annihilation on whatsoever folio with their help. Only your imagination (and coding abilities) stand up in your way.
i. Full-Width Page Template
The first example we volition look at is an advanced version of the demo template we created to a higher place. Upwards there, we already removed the sidebar by deleting <?php get_sidebar(); ?> from the lawmaking. Nonetheless, every bit you accept seen from the screenshot this does not actually issue in a full-width layout since the content section stays on the left.
To address this, we need to deal with the CSS, in particular this part:
.site-content { float: left; width: 65.1042%; } The width attribute limits the chemical element which holds our content to 65.1042% of the bachelor space. We desire to increase this.
If we just change it to 100%, even so, this will affect all other pages on our site, which is far from what nosotros want. Therefore, the first order here is to alter the master div'due south class in our custom template to something else, like class="site-content-fullwidth". The result:
<?php /* * Template Name: Custom Full Width * clarification: >- Page template without sidebar */ get_header(); ?> <div id="master" class="site-content-fullwidth"> <div id="content" role="chief"> <?php while ( have_posts() ) : the_post(); ?> <?php get_template_part( 'content', 'page' ); ?> <?php comments_template( ', true ); ?> <?php endwhile; // end of the loop. ?> </div><!-- #content --> </div><!-- #master --> <?php get_footer(); ?> Now we can accommodate the CSS for our new custom class:
.site-content-fullwidth { float: left; width: 100%; } As a issue, the content now stretches all the mode across the screen.
2. Dynamic 404 Fault Page With Widget Areas
The 404 error page is where every person lands who tries to admission a page on your website that doesn't exist, be it through a typo, a faulty link or because the page's permalink has changed.
Despite the fact that getting a 404 is disliked by everyone on the Internet, if you lot are running a website the 404 error page is of no fiddling importance. Its content tin can be the decisive factor on whether someone immediately abandons your site or sticks around and checks out your other content.
Coding a customized mistake page from scratch is cumbersome, peculiarly if yous are not confident in your abilities. A meliorate way is to build widget areas into your template and so you can flexibly modify what is displayed there by drag and driblet.
For this nosotros will take hold of and edit the 404.php file that ships with Twenty Twelve (template bureaucracy, remember?). All the same, earlier we alter anything on there, we will first create a new widget by inserting the following code into our functions.php file:
register_sidebar( array( 'name' => '404 Page', 'id' => '404', 'description' => __( 'Content for your 404 fault page goes here.' ), 'before_widget' => '<div id="error-box">', 'after_widget' => '</div>', 'before_title' => '<h3 class="widget-title">', 'after_title' => '</h3>' ) ); This should display the newly created widget in your WordPress back-terminate. To make sure that information technology actually pops up on the site, you need to add the following line of code to your 404 page in the appropriate place:
<?php dynamic_sidebar( '404' ); ?> In my example, I want to replace the search form (<?php get_search_form(); ?>) inside the template with my new widget, making for the following code:
<?php /** * The template for displaying 404 pages (Not Found) * * @packet WordPress * @subpackage Twenty_Twelve * @since Xx Twelve 1.0 */ get_header(); ?> <div id="primary" class="site-content"> <div id="content" part="main"> <article id="post-0" class="postal service error404 no-results non-found"> <header class="entry-header"> <h1 class="entry-title"><?php _e( 'This is somewhat embarrassing, isn&rsquo;t it?', 'twentytwelve' ); ?></h1> </header> <div class="entry-content"> <?php dynamic_sidebar( '404' ); ?> </div><!-- .entry-content --> </article><!-- #mail-0 --> </div><!-- #content --> </div><!-- #primary --> <?php get_footer(); ?> After uploading the template to my site, it's time to populate my new widget expanse:
If I now take a look at the 404 mistake page, my newly created widgets prove upwards in that location:
iii. Page Template For Displaying Custom Postal service Types
Custom post types are a bully way to innovate content that has its ain set of data points, design and other customizations. A favorite use case for these post types are review items such as books and movies. In our case nosotros desire to build a page template that shows portfolio items.
Nosotros outset demand to create our custom post type (CPT). This can exist done manually or via plugin. I plugin option I can wholeheartedly recommend is Types. Information technology lets yous hands create custom mail service types and custom fields.
Install and activate Types, add together a custom post, brand sure its slug is 'portfolio', customize any fields you need (such as adding a featured epitome), adjust any other options, and save.
At present, that we have our portfolio post type, nosotros want information technology to testify upward on our site. The commencement thing nosotros'll practise is create the page in question. Be aware that if you chose 'portfolio' every bit the slug of your CPT, the page tin not have the same slug. I went with my clients-portfolio and also added some example text.
Subsequently adding a few items in the 'portfolio' post type section, we desire them to show upwardly on our page right underneath the page content.
To reach this we will again employ a derivative of the page.php file. Copy information technology, call information technology portfolio-template.php and change the header to this:
<?php /* * Template Name: Portfolio Template * description: >- Page template to display portfolio custom post types * underneath the page content */ Nonetheless, in this case we will take to make a few changes to the original template. When y'all take a look at the lawmaking of page.php, you will come across that information technology calls another template file in the middle, named content-page.php (where it says <?php get_template_part( 'content', 'page' ); ?>). In that file we find the following lawmaking:
<article id="mail service-<?php the_ID(); ?>" <?php post_class(); ?>> <header form="entry-header"> <?php if ( ! is_page_template( 'page-templates/front-page.php' ) ) : ?> <?php the_post_thumbnail(); ?> <?php endif; ?> <h1 form="entry-title"><?php the_title(); ?></h1> </header> <div form="entry-content"> <?php the_content(); ?> <?php wp_link_pages( assortment( 'before' => '<div class="page-links">' . __( 'Pages:', 'twentytwelve' ), 'subsequently' => '</div>' ) ); ?> </div><!-- .entry-content --> <footer grade="entry-meta"> <?php edit_post_link( __( 'Edit', 'twentytwelve' ), '<span grade="edit-link">', '</span>' ); ?> </footer><!-- .entry-meta --> </article><!-- #post --> As yous can encounter, it is here that the page title and content are chosen. Since we definitely want those on our portfolio site, nosotros will need to copy the necessary parts of this template to our page.php file. The result looks like this:
get_header(); ?> <div id="master" class="site-content"> <div id="content" role="main"> <?php while ( have_posts() ) : the_post(); ?> <header class="entry-header"> <?php the_post_thumbnail(); ?> <h1 form="entry-title"><?php the_title(); ?></h1> </header> <div class="entry-content"> <?php the_content(); ?> </div><!-- .entry-content --> <?php comments_template( ', truthful ); ?> <?php endwhile; // terminate of the loop. ?> </div><!-- #content --> </div><!-- #primary --> <?php get_sidebar(); ?> <?php get_footer(); ?> To go the portfolio items onto our page, we volition add together the post-obit lawmaking right below the the_content() call.
<?php $args = assortment( 'post_type' => 'portfolio', // enter custom mail type 'orderby' => 'appointment', 'order' => 'DESC', ); $loop = new WP_Query( $args ); if( $loop->have_posts() ): while( $loop->have_posts() ): $loop->the_post(); global $mail; echo '<div class="portfolio">'; echo '<h3>' . get_the_title() . '</h3>'; echo '<div grade="portfolio-image">'. get_the_post_thumbnail( $id ).'</div>'; echo '<div class="portfolio-work">'. get_the_content().'</div>'; echo '</div>'; endwhile; endif; ?> This will brand the CPT bear witness upward on the folio:
I'k sure we all agree that information technology looks less than stellar, so some styling is in order.
/* Portfolio posts */ .portfolio { -webkit-box-shadow: 0px 2px 2px 0px rgba(50, l, 50, 0.75); -moz-box-shadow: 0px 2px 2px 0px rgba(l, l, fifty, 0.75); box-shadow: 0px 2px 2px 0px rgba(fifty, l, fifty, 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-piece of work { display: inline-block; max-width: 80%; } .portfolio h3{ border-bottom: 1px solid #999; font-size: ane.57143rem; font-weight: normal; margin: 0 0 15px; padding-lesser: 15px; } Much better, don't you think?
And here is the entire code for the portfolio page template:
<?php /* * Template Proper name: Portfolio Template * description: >- Page template to display portfolio custom post types * underneath the page content */ get_header(); ?> <div id="primary" form="site-content"> <div id="content" role="main"> <?php while ( have_posts() ) : the_post(); ?> <header course="entry-header"> <?php the_post_thumbnail(); ?> <h1 class="entry-title"><?php the_title(); ?></h1> </header> <div class="entry-content"> <?php the_content(); ?> <?php $args = array( 'post_type' => '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 '<div class="portfolio">'; echo '<h3>' . get_the_title() . '</h3>'; echo '<div class="portfolio-image">'. get_the_post_thumbnail( $id ).'</div>'; echo '<div course="portfolio-work">'. get_the_content().'</div>'; echo '</div>'; endwhile; endif; ?> </div><!-- #entry-content --> <?php comments_template( ', true ); ?> <?php endwhile; // end of the loop. ?> </div><!-- #content --> </div><!-- #chief --> <?php get_sidebar(); ?> <?php get_footer(); ?> 4. Contributor Page With Avatar images
Next up in our folio template employ cases is a contributor folio. We want to prepare up a list of authors on our website, including their images and the number of posts they have published under their proper noun. The end issue will expect like this:
We will once more first out with our hybrid file from earlier and add the lawmaking for the contributor list to it. Only what if you don't know how to create such a affair? No worries, yous can get by with intelligent stealing.
You see, the Twenty Fourteen default theme comes with a correspondent page past default. You tin find its template in the folio-templates folder with the proper noun contributors.php.
When looking into the file, however, you will only observe the following telephone call in there: twentyfourteen_list_authors();. Luckily, as an avid WordPress user you now conclude that this probably refers to a office in Twenty Fourteen's function.php file and you lot would be correct.
From what nosotros find in in that location, the role that interests us is this:
<?php // Output the authors listing. $contributor_ids = get_users( assortment( 'fields' => 'ID', 'orderby' => 'post_count', 'club' => 'DESC', 'who' => 'authors', )); foreach ( $contributor_ids as $contributor_id ) : $post_count = count_user_posts( $contributor_id ); // Movement on if user has non published a post (withal). if ( ! $post_count ) { continue; } ?> <div class="contributor"> <div class="contributor-info"> <div class="contributor-avatar"><?php echo get_avatar( $contributor_id, 132 ); ?></div> <div class="contributor-summary"> <h2 class="contributor-proper noun"><?php echo get_the_author_meta( 'display_name', $contributor_id ); ?></h2> <p class="contributor-bio"> <?php echo get_the_author_meta( 'description', $contributor_id ); ?> </p> <a form="button contributor-posts-link" href="<?php echo esc_url( get_author_posts_url( $contributor_id ) ); ?>"> <?php printf( _n( '%d Commodity', '%d Articles', $post_count, 'twentyfourteen' ), $post_count ); ?> </a> </div><!-- .contributor-summary --> </div><!-- .correspondent-info --> </div><!-- .contributor --> <?php endforeach; ?> We will again add it beneath the call for the_content() with the following upshot:
Now for a little scrap of styling:
/* Contributor page */ .contributor { edge-lesser: 1px solid rgba(0, 0, 0, 0.1); -webkit-box-sizing: edge-box; -moz-box-sizing: border-box; box-sizing: border-box; brandish: inline-cake; padding: 48px 10px; } .contributor p { margin-bottom: 1rem; } .contributor-info { margin: 0 auto 0 168px; } .contributor-avatar { edge: 1px solid rgba(0, 0, 0, 0.1); float: left; line-height: 0; margin: 0 30px 0 -168px; padding: 2px; } .correspondent-avatar img{ border-radius: 0; } .correspondent-summary { float: left; } .contributor-name{ font-weight: normal; margin: 0 !important; } .contributor-posts-link { background-color: #24890d; border: 0 none; edge-radius: 0; color: #fff; brandish: inline-cake; font-size: 12px; font-weight: 700; line-elevation: normal; padding: 10px 30px 11px; text-transform: uppercase; vertical-align: bottom; } .contributor-posts-link:hover { colour: #000; text-ornamentation: none; } And that should be it. Cheers Twenty Fourteen!
5. Customized Archive Page
20 Twelve comes with its ain template for archive pages. Information technology will jump into action, for case, when yous try to view all past posts from a certain category.
However, I want something a little more than like what Problogger has done: a page that lets people detect boosted content on my site in several different ways. That, again, is done with a page template.
Staying with our mixed template from before, we will add the following below the the_content() call:
<div course="archive-search-form"><?php get_search_form(); ?></div> <h2>Archives by Year:</h2> <ul><?php wp_get_archives('type=yearly'); ?></ul> <h2>Archives by Month:</h2> <ul><?php wp_get_archives('type=monthly'); ?></ul> <h2>Archives by Bailiwick:</h2> <ul> <?php wp_list_categories('title_li='); ?></ul> Plus, a piffling fleck of styling for the search bar:
.annal-search-class { padding: 10px 0; text-align: center; } And the event should await a little chip like this:
For completion's sake, here is the entire file:
<?php /** * Template Name: Custom annal template * */ get_header(); ?> <div id="principal" class="site-content"> <div id="content" role="master"> <?php while ( have_posts() ) : the_post(); ?> <header class="entry-header"> <?php the_post_thumbnail(); ?> <h1 class="entry-title"><?php the_title(); ?></h1> </header> <div form="entry-content"> <?php the_content(); ?> <div course="archive-search-course"><?php get_search_form(); ?></div> <h2>Athenaeum by Year:</h2> <ul><?php wp_get_archives('type=yearly'); ?></ul> <h2>Archives by Month:</h2> <ul><?php wp_get_archives('type=monthly'); ?></ul> <h2>Athenaeum by Bailiwick:</h2> <ul><?php wp_list_categories('title_li='); ?></ul> </div><!-- #entry-content --> <?php comments_template( ', true ); ?> <?php endwhile; // finish of the loop. ?> </div><!-- #content --> </div><!-- #primary --> <?php get_sidebar(); ?> <?php get_footer(); ?> Don't forget to assign it to a page!
WordPress Page Templates In A Nutshell
On your manner to mastering WordPress, learning to use folio templates is an of import step. They tin make customizing your website very, very easy and permit you lot to assign unique functionality and design to as many or few pages as you wish. From adding widget areas to showing custom post types to displaying a listing of your website's contributors — the possibilities are practically endless.
Whether you use conditional tags, exploit the WordPress template hierarchy, or create page-specific template files is entirely up to you and what y'all are trying to attain. Beginning off small and work your way up to more complicated things. It won't be long before every part of your WordPress website volition answer to your every call.
Do y'all have experience using page templates in WordPress? What other utilise cases can y'all add together to the list? Whatsoever of import details to add? Please tell us about information technology in the comments.
Paradigm credit: Kevin Phillips
(og, ml)
Source: https://www.smashingmagazine.com/2015/06/wordpress-custom-page-templates/
Posted by: sheavoiled.blogspot.com
0 Response to "How To Change Template Higherarchy"
Post a Comment