The front end template is done along with the widgets part followed by additional admin options, now, it's time to go through the general templates.It's always great to add comments that provides the information to wordpress system regarding which template layout should be applied for specific contents. You need to add some posts to view templates and categories to view navigations in your database before creating these templates.
The first thing you see in any wordpress theme is the basic frontpage template that displays wordpress posts in loop. Lets add that feature to the index page.
<?php /** * The main template file * * This is the most generic template file in a WordPress theme * and it is used to display a page when nothing more specific matches a query. * * @package WordPress * @subpackage Webtrickshome * @version 1.0 */ get_header(); ?> <div id="primary" class="content-area"> <main id="main" class="site-main"> <?php if ( have_posts() ) : ?> <?php if ( is_home() && ! is_front_page() ) : ?> <header> <h1 class="page-title"><?php single_post_title(); ?></h1> </header> <?php endif; ?> <?php while ( have_posts() ) : the_post(); get_template_part( 'content', get_post_format() ); endwhile; the_posts_pagination( array( 'prev_text' => __( 'Previous page', 'webtrickshome' ), 'next_text' => __( 'Next page', 'webtrickshome' ), 'before_page_number' => '<span class="meta-nav screen-reader-text">' . __( 'Page', 'webtrickshome' ) . ' </span>', ) ); else : get_template_part( 'content', 'none' ); endif; ?> </main> </div> <?php get_footer(); ?>
It's the default template for wordpress that'll be used in case where any specific page template is not available for any contents.
We wrapped the wordpress loop in some <div> tags to add styles to the contents inside it.
if ( have_posts() ) command will check if there's any post and execute the remaining commands in case the condition is met while another command after else will run if the condtion is not met.
single_post_title() will print the title of the post.
while ( have_posts() ) : the_post(); get_template_part( 'content', get_post_format() ); endwhile; will start the loop and for each post that is retrieved by this loop will be rendered in the frontend using another template named content in the theme's root directory depending upon the post format if available.
the_posts_pagination() is a pre-built wordpress function that displays paginations if the number of post is higher than the one defined via dashboard reading settings which would be 10 by default.
get_template_part( 'content', 'none' ); will make wordpress use another template when no contents are found.
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<div class="row">
<div class="col-sm-4">
<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a>
</div>
<div class="col-sm-8">
<?php
the_title( sprintf( '<h2 class="entry-title"><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></h2>' );
the_excerpt();
?>
<a href="<?php the_permalink(); ?>">Read more...</a>
</article>
It's totally upto your preference how you want to display the contents. Here, we went with the easy one displaying thumbnail with the link to post on the left hand side while displaying post title and trimmed desription content. We also added a link naming it read more... at the bottom of the post content.
sprintf() will print the content inside it while %s inside it denotes a string variable. Each % will take up a variable in sequential order of first to first in case there are multiple variables and % signs. Here, %s takes up the name of the current post in the loop.
This template is used by wordpress automatically when no content is found related to any query passed by the user. You can display any information here in this template.
<div class="container"> <h1 class="page-title text-center"> <?php _e( 'Page Not Found!', 'webtrickshome' ); ?> </h1> <div class="page-content text-center"> <?php if ( is_home() && current_user_can( 'publish_posts' ) ) : ?> <p><?php printf( __( 'Ready to publish your first post? <a href="%1$s">Get started here</a>.', 'webtrickshome' ), esc_url( admin_url( 'post-new.php' ) ) ); ?></p> <?php elseif ( is_search() ) : ?> <p><?php _e( 'Sorry, but nothing matched your search terms. Please try again with some different keywords.', 'webtrickshome' ); ?></p> <?php get_search_form(); ?> <?php else : ?> <p><?php _e( "It seems we can't find what you're looking for. Perhaps searching can help.", "webtrickshome" ); ?></p> <?php get_search_form(); ?> <?php endif; ?> </div> </div>
The HTML wrappers are used to add styles to the contents. _e() displays the text from first parameter as page title while second parameter denotes the domain and is optional.
is_home() && current_user_can( 'publish_posts' ) checks if the page being displayed is the home page and the user has admin authority. In that case the message inside it will be displayed asking the user to add new post.
is_search() checks if the page is being displayed as a result of some search action. In that case the message inside it will be displayed where get_search_form() will retrieve the search box and functionality from wp-includes/general-template.php located in the root directory of the project.
In other cases like passing url querries for categories or archives, if nothing is found and this page is being displayed, the last condition will get activated and the message inside it will be displayed.
This template determines the layout of single posts in wordpress. Header, Sidebar and Footer templates are included in it. If the querried post is present in the database, then the title of the post is displayed while rest of the contents will be displayed via content-single.php template. If the comment option is open then the comment field is displayed that'll also display comments added to the post on its own. If no post is found then content-none.php will be used by wordpress. If no sidebar is found, wordpress default sidebar will be used in the template.
<?php get_header(); ?> <div class="container-fluid"> <div class="row"> <div class="col-sm-9"> <?php if ( have_posts() ) : ?> <h1><?php the_title();?></h1> <?php endif; ?> <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); get_template_part( 'content-single', get_post_format() ); if ( comments_open() || get_comments_number() ) : comments_template(); endif; endwhile; endif; ?> </div> <div class="col-sm-9"> <?php get_sidebar(); ?> </div> </div> </div> <?php get_sidebar(); get_footer(); ?>
It's the main template for single posts where the contents are wrapped inside HTML elements to provide an attractive look to the post contents. Here, a basic example of this template is displayed.
<?php if ( has_post_thumbnail() ) { ?>
<div class="post-thumbnail">
<?php the_post_thumbnail(); ?>
</div>
<?php } ?>
<div class="post-content">
<?php the_content(); ?>
</div>
Category.php is the default template to display posts from a specific category in loop. Here's a basic example.
<?php get_header(); ?> <div class="container"> <h1"><?php single_cat_title();?></h1> </div> <div class="container"> <div class="row"> <div class="col-sm-9"> <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <div class="row"> <div class="col-sm-4"> <a href="<?php the_permalink() ?>"><?php the_post_thumbnail(); ?></a> </div> <div class="col-sm-8"> <h2><a href="<?php the_permalink() ?>"> <?php the_title(); ?></a> </h2> <p><?php the_excerpt(); ?></p> </div> </div> <?php endwhile; the_posts_pagination( array( 'prev_text' => __( 'Previous page', 'webtrickshome' ), 'next_text' => __( 'Next page', 'webtrickshome' ), ) ); else: ?> <h2>Sorry, no posts matched your criteria.</h2> <?php endif; ?> </div> <div class="col-sm-3"> <?php get_sidebar(); ?> </div> </div> </div> <?php get_footer(); ?>
Now, you have everything sorted out. You've got the home page, default index page, category page, content page, no content page, single page, single content page and category page. Your wordpress theme should work fine but you still don't have a template to display page contents. The default template index.php will be used that points to content.php to display title, thumbnail and excerpt. Either you have to display the_content() instead of the_excerpt() in content.php or you have to create a new template named page.php. A page template would be something like:
<?php get_header(); ?> <div class="container"> <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <h1 class="search-title"><?php the_title(); ?></h1> <?php endwhile; endif; ?> </div> <div class="container"> <div class="row"> <div class="col-sm-9"> <?php while ( have_posts() ) : the_post(); <?php while ( have_posts() ) : the_post(); ?> <?php the_post_thumbnail(); ?> <?php the_content(); ?> <?php endwhile; ?> endwhile; ?> </div> <div class="col-sm-3"> <?php get_sidebar(); ?> </div> </div> </div> <?php get_footer(); ?>
You can also define a separate template to display search results else the default template will be used. Here's an example of search template.
<?php get_header(); ?> <div class="container"> <h1 class="search-title"><?php printf( __( 'Search Results for: %s', 'webtrickshome' ), get_search_query() ); ?></h1> </div> <div class="container"> <div class="row"> <div class="col-sm-9"> <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); get_template_part( 'content', 'search' ); endwhile; the_posts_pagination( array( 'prev_text' => __( 'Previous page', 'webtrickshome' ), 'next_text' => __( 'Next page', 'webtrickshome' ), ) ); else : get_template_part( 'content', 'none' ); endif; ?> </div> <div class="col-sm-3"> <?php get_sidebar(); ?> </div> </div> </div> <?php get_footer(); ?>
Since, we're pointing the search content to content-search template here. Lets create it to be some thing different than the content.ph file.
<div class="row"> <div class="search-post-thumbnail"> <?php the_post_thumbnail(); ?> </div> <div class="search-post-excerpt"> <h2><?php the_title( sprintf( '<a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a>' ); ?></h2> <p><?php the_excerpt(); ?></p> </div> </div>
In this way, you can create your own wordpress theme easily.
Leave a comment