Create Custom Category Templates in WordPress

You know how to add categories in WordPress and add different types of posts in each categories. So in your WordPress themes you want to show different types of page templates for different categories. Now I’m going to show a very easy tricks for this.

Step 1

Download Custom Category Templates Plugin and install it.

Step 2

Just like you create custom page templates, add this code to your page where you want to show posts for any category.

<?php /** * Category Template: Grid */ ?>

By adding this code you defined the template name Grid. You can set different names for different type of templates.

Step 3

Now go to your admin category page and add a new category. You will see a template option added there for selecting templates.

Step 4

Ok how to display the category posts into the template. Add this code to your page for get the selected category. It means when someone click on category link from the website, this code will get that category name.


<?php $category = get_the_category(); $current_category = $category[0]; ?>

 

 

If you want to show the category name then just use this


<?php echo $current_category->cat_name ; ?>

Step 5

Now I’m using WP_Query for run a loop and show all the posts of that selected category. Here is a sample of a code that I used on my project for display posts of a category.


<?php $args = array ( 'post_type' => 'post',
	'nopaging'               => false,
	'posts_per_page'         => '6',
	'category_name'         =>  $current_category->cat_name,
	'order'                  => 'DESC',
	'orderby'                => 'ID',
	'offset'=>4
);

$query = new WP_Query( $args );
?>
<?php if ( $query->have_posts() ) : while ( $query->have_posts() ) : $query->the_post(); ?>
<?php $feat_image_url = wp_get_attachment_url( get_post_thumbnail_id() ); ?>  





<div class="col-xs-6 padding-10">
   
<div class="grid-post">
	<a href="<?php the_permalink(); ?>" class="mb-20">
        <img src="<?php echo $feat_image_url;?>" alt="Tranding News">
         </a>

    
<div class="post-info padding-15 ptb-20 bd-grey">
			

     
<h4 class="mb-15 fw-6">
         <a href="<?php the_permalink(); ?>" class="text-dark"><?php the_title(); ?></a>
     </h4>


      <span class="date"><?php the_time( 'F jS, Y' ); ?></span>
    </div>

   </div>

</div>

                         
<?php endwhile; ?>
<?php endif; ?>

Hope it works. Thanks for reading this article.

How to Display Post Excerpts in WordPress Themes

In any WordPress magazine or blog’s home page we see lots of posts with
summery of that post. The texts we see in the home page actually comes from the post content. But we just see few words of the post content. In WordPress we called it excerpt. So how can you add this cool feature in your website.

Well the first thing is add this code in your functions.php.


// Changing excerpt length
function new_excerpt_length($length) {
return 100;
}
add_filter('excerpt_length', 'new_excerpt_length');

// Changing excerpt more
function new_excerpt_more($more) {
return '...';
}
add_filter('excerpt_more', 'new_excerpt_more');

The first function return the length of the text that we want to show and
the second funciton returns how many dots we want to show after the text. You can change it both as you want.

Display Excerpt

Ok now simply add this funciton into your post loop and it work perfectly.


<?php the_excerpt(); ?>

Pretty easy yeah ??

How to Exclude Latest Post from the WordPress Post Loop

Recently I made a News website there I have to run a query for all the posts except the latest post. WordPress have a cool solution for this.
When run WP_Query, just add this into your query argument. And it will work fine.


'offset'=1,

Here is an perfect example. You can use like this.


$args = array (
'post_type' => 'post',
'nopaging' => false,
'posts_per_page' => '3',
'category_name' => 'sports',
'order' => 'DESC',
'orderby' => 'ID',
'offset'=> 1
);

Hope it works. Thanks for you !

WordPress Theme Development Part 10 – Featured Image

You already know, how to add pages and posts in WordPress. You added contents also. But still you are not happy coz you have lots of cool images that you want to add on your posts and pages. Ok lets start.

In your WordPress admin panel there is no option for adding images. Enabling this option add this function in your functions.php.


add_theme_support( 'post-thumbnails');

Now take a look on the Add New page. An option appear called Featured Image. Add your post images here and update/publish the post.

Display the Image

Use this function into your post or page loop to display the image. Remove the HTML tag <img src=””> and replace it there.


the_post_thumbnail();

Add Image Class

In your <img> tag there might be some css classes that not working now.
Because the_post_thumbnail() only bring the post images but no css class added yet. To add your theme’s image class use the function like this.


the_post_thumbnail('thumbnail', array('class' => 'alignleft')); 

Image Size

If you want to make a fixed shape for your post images. use this function
in you functions.php


set_post_thumbnail_size( 500, 500);

First parameter is Width and Second is the height.

When you want same image in different places with different sizes, you can use the_post_thumbnail() function with different parameters. It will crop the image based on the parameter we use and show different sizes in different type of posts.


//Default WordPress
the_post_thumbnail( 'thumbnail' ); // Thumbnail (150 x 150 hard cropped)
the_post_thumbnail( 'medium' ); // Medium resolution (300 x 300 max height 300px)
the_post_thumbnail( 'medium_large' ); // Medium Large (added in WP 4.4) resolution (768 x 0 infinite height)
the_post_thumbnail( 'large' ); // Large resolution (1024 x 1024 max height 1024px)
the_post_thumbnail( 'full' ); // Full resolution (original size uploaded)

If you have different post types you can set the image size like this.


add_image_size( 'projects', 370, 300, true);
add_image_size( 'clients', 170, 40, true);
add_image_size( 'sliders', 1920, 628, true);
add_image_size( 'team', 270, 270, true);

Hope this tutorial is a cool solution for your website images.
Thanks

WordPress Theme Development Part 9 – Page

In WordPress we can add content by post or page. In a Newspaper or Blog
every single news is a post and pages like About, Contact. These are pages.
Behind the scene both are the same thing and they store in same database table. The difference is post type. Post’s post type is post and Page’s post type is page.

Well in your new WordPress theme create a file page.php in your theme’s root folder. Just like the index.php, add your header.php and footer.php in it.Now use this code where you want to show your page contents.


<?php while ( have_posts() ) : the_post(); ?>
<h1><?php the_title();?></h1>
<div class="content">
<?php the_content(); ?>
</div>
<?php endwhile; ?>

Now go to your WordPress admin, create a new page and add the page title and page content. Click on the Permalink and you will see the page content you added. So in this way you can add several pages as much your website required.
Thanks