আগামী ১৫ ডিসেম্বর -২০১৭ তারিখ থেকে শুরু হচ্ছে পাঁচ মাস ব্যাপী Professional Web Design and Development with HTML, CSS PHP,MySQL,JavaScript, AJAX, JQUERY, Bootstrap and Live Project কোর্সের ৮৭ তম ব্যাচ এবং ২৬ ডিসেম্বর-২০১৭ তারিখ থেকে শুরু হচ্ছে চার মাস ব্যাপী Zend PHP-7 Certified PHP Engineering (Advance PHP) কোর্সের ৩৫ তম ব্যাচ। প্রত্যেকটি কোর্স এর ফী নির্ধারণ করা হয়েছে ৩০,০০০/= আগ্রহীদেরকে অতিসত্বর মাসুদ আলম স্যার এর সাথে যোগাযোগ করতে অনুরোধ করা যাচ্ছে। স্যার এর মোবাইল: 01722 81 75 91

WordPress Theme Development: Index PHP Blog Categories Query (Lesson-7)

WordPress is the most powerful & popular blogging platform. Even people is now using wordpress cms as any types of website as the features of dynamic change with wordpress loop. In this tutorial I will play with the basic wordpress loop and w3Pro index category loop to put the post information with in a wordpress php function.

Before going to wordpress loop, you must visit this template tags from wordpress codex https://codex.wordpress.org/Template_Tags, if you want to be a best wordpress programmer. In the most wordpress web development, there is something critical way to move on the development or if you are dealing with multi dimensional rules to apply on your wordpress website.

If you are using The Loop inside your own wordpress theme development (and your own design is not a template), set WP_USE_THEMES to false:

<?php define('WP_USE_THEMES', false); get_header(); ?>

The loop starts with the below php code in wordpress:

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

And the loop ends with the below php code in wordpress:

<?php endwhile; else: ?>
<p><?php _e('Sorry, no posts available in your blog.'); ?></p>
<?php endif; ?>

wordpress-loop
The below php script is called wordpress basic loop control structures:

<?php 
	if ( have_posts() ) {
		while ( have_posts() ) {
			the_post(); 
			//
			// Post Content here
			//
		} // end while
	} // end if
?>

How funny! Now I will play with this loop to meet my target, where I want to display the blog categories with the posts. This below php function is querying the all categories of this blog with their latest 6 posts.

<?php
    $w3procats = get_categories(array(
        'child_of' => 0,
        'orderby' => 'name',
        'order' => 'ASC',
            )
    );
    foreach ($w3procats as $cat) :
        $args = array(
            'posts_per_page' => 6,
            'category__in' => array($cat->term_id), // Term by id (''term_id'') using in Categories taxonomy.
        );
        $w3ProNewCatQuery = new WP_Query($args);
        if ($w3ProNewCatQuery->have_posts()) :
            echo '<div class="six columns">';
            echo '<h3 class="post-title"><a href="' . get_category_link($cat->term_id) . '" title="' . sprintf(__("View all posts under %s"), $cat->name) . '" ' . '>' . $cat->name . '</a> </h3> ';
            echo '<ul class="row box">';
            $first_post = 0;
            while ($w3ProNewCatQuery->have_posts()) {
                $first_post++;
                if ($first_post == 1) {
                    $w3ProNewCatQuery->the_post();
                    ?>
                    <li><a style="font-weight:bold;" title="<?php printf(esc_attr__('Permalink to %s', 'compass'), the_title_attribute('echo=0')); ?>" href="<?php the_permalink(); ?>" rel="bookmark"> <?php the_title(); ?></a></li>
                    <?php
                    if ((function_exists('has_post_thumbnail')) && (has_post_thumbnail())) {
                        echo get_the_post_thumbnail($post->ID);
                    } else {
                        main_image();
                    }
                    ?>
                    <?php the_excerpt(); ?>
                    <div class="clear"></div>
                    <?php
                }
                if ($first_post > 1) {
                    $w3ProNewCatQuery->the_post();
                    ?>
                    <li><a title="<?php printf(esc_attr__('Permalink to %s', 'compass'), the_title_attribute('echo=0')); ?>" href="<?php the_permalink(); ?>" rel="bookmark"> <?php the_title(); ?></a></li> 
                    <?php
                }
                wp_reset_postdata();
            }
            echo '</ul></div>';
            ?>
            <?php
        else :
            echo 'No post published under:' . $cat->name;
        endif;
    endforeach;
    ?>

First I get the all categories to send an array function of the blog via get_categories(). With a foreach loop as usual I apply wordpress basic loop for all posts of the blog.

As I have some posts in wordpress admin and the posts are displaying in our home index page…
posts-display-with-categories

Now I am going to design the style of the category box with their posts via css.

/*W3Pro Box Content CSS
...................................*/
.box {
    border-bottom-right-radius: 1em;
    border-left: 1px solid #EEEEEE;
    box-shadow: 5px 5px 10px 2px #DDDDDD;
    margin-bottom: 30px;
}
h3.post-title {
    background: none repeat scroll 0 0 #20747F;
    color: #FFFFFF;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 0.01em;
    line-height: 2em;
    margin-bottom: 10px;
    padding-left: 1em;
}
ul.box {
    list-style-type: none;
    margin-left: 0;
    padding: 5px 20px;
}
ul.box li:before {
    color: #20747F;
    font-family: 'FontAwesome';
    content: "\f0a9";
    margin-right: 5px;
}
ul.box li {
    font-size: 13px;
    padding-bottom: 10px;
}
.post-title a {
    color: #FFFFFF;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 0.01em;
    line-height: 2em;
    margin-bottom: 10px;
    padding-left: 1em;
}
.box p {
    font-size: 13px;
    line-height: 18px;
    margin-bottom: 20px;
}
.box img {
    float: left;
    height: 100px;
    padding-right: 10px;
    width: 80px;
}

After adding the css in our style.css I got the below preview:
post-box-style-display

In this tutorial we have learn about wordpress loop and a critical loop structure for w3pro wordpress theme which is working dynamically. Next tutorial I will post about wordpress recent posts and latest view posts loop.

Hello, This is Rashad. I like programming.

One comment on “WordPress Theme Development: Index PHP Blog Categories Query (Lesson-7)

Leave a Reply

Your email address will not be published. Required fields are marked *