Before we start, it is important that you understand how the template hierarchy works for attachments. You can either specify it like mime_type.php. Mime type examples (image.php, video.php, application.php etc). For specifying it just for a certain image type, you can say image_gif.php. If the mime_type.php is not found, then it looks for attachment.php, then single-attachment.php, then single.php, then index.php.

It depends on how custom of a project you are working for, you may not need to create image_gif.php. You can simply suffice for image.php or even attachment.php.

All you have to do is open a blank file and copy all of your single.php content in there. You can save it as single-attachment.php or any other mime_type that you want. Then replace the loop code with something like this:

<?php
if ( have_posts() ) : while ( have_posts() ) : the_post();
$photographer = get_post_meta($post->ID, 'be_photographer_name', true);
$photographerurl = get_post_meta($post->ID, 'be_photographer_url', true);
?>

<h1><?php the_title(); ?></h1>

<div class="photometa"><span class="photographername"><?php echo $photographer; ?></span> // <a href="<?php echo $photographerurl ?>" target="_blank" class="photographerurl"><?php echo $photographerurl ?></a></div>

                        <div class="entry-attachment">
<?php if ( wp_attachment_is_image( $post->id ) ) : $att_image = wp_get_attachment_image_src( $post->id, "full"); ?>
                        <p class="attachment"><a href="<?php echo wp_get_attachment_url($post->id); ?>" title="<?php the_title(); ?>" rel="attachment"><img src="<?php echo $att_image[0];?>" width="<?php echo $att_image[1];?>" height="<?php echo $att_image[2];?>"  class="attachment-medium" alt="<?php $post->post_excerpt; ?>" /></a>
                        </p>
<?php else : ?>
                        <a href="<?php echo wp_get_attachment_url($post->ID) ?>" title="<?php echo wp_specialchars( get_the_title($post->ID), 1 ) ?>" rel="attachment"><?php echo basename($post->guid) ?></a>
<?php endif; ?>
                        </div>

<?php endwhile; ?>

<?php endif; ?>

The code above simply displays the Image Title. Below it, it will display Author’s name and URL which we added as additional fields in our previous article. Then it looks for the image and displays the full size. You can customize it to show any other size if you have additional image sizes.

Final Outcome:

Now that we have covered all three main aspects of this gallery that we were going to create, in the next article, we will show you how it looks when all things are pieced together. This way, you can use WordPress’s built-in mechanism to create a full-featured gallery with albums. No extra plugins required.

Resource:
Template Hierarchy Codex

How to Create a Custom Single Attachments Template in WordPress is a post from: WPBeginner which is not allowed to be copied on other sites.

All you have to do is paste the following code inside a loop.

<?php if ( $post->post_type == 'data-design' && $post->post_status == 'publish' ) {
		$attachments = get_posts( array(
			'post_type' => 'attachment',
			'posts_per_page' => -1,
			'post_parent' => $post->ID,
			'exclude'     => get_post_thumbnail_id()
		) );

		if ( $attachments ) {
			foreach ( $attachments as $attachment ) {
				$class = "post-attachment mime-" . sanitize_title( $attachment->post_mime_type );
				$thumbimg = wp_get_attachment_link( $attachment->ID, 'thumbnail-size', true );
				echo '<li class="' . $class . ' data-design-thumbnail">' . $thumbimg . '</li>';
			}

		}
	}
?>

The code above first checks if the post type is data-design and the post status is published. You may not need the first conditional depending on what you are trying to do. Then we simply run the get_posts query. Everything is pretty self explanatory there. The key that we must highlight is the exclude feature. That line is making sure that featured image does not show up. If you take that line away, then the featured image will show up. After specifying all the parameters, we simply specify what to do when each attachment is pulled. We are pulling attachment type for the class variable. Then the $thumbimg variable is simply using wp_get_attachment_link to pull the image at a specific thumbnail size, and it also hyperlinks the image to the single attachment pages. In the final step, we simply echo it.

We ran this code inside a loop with a separate call for featured image which links to the individual post. Final outcome looked something like this:

Each featured image served as an album identifying image which you can see. The grey spots were filled with the attachments for the post. We hope that this would help those who are looking to push WordPress beyond a blogging platform.

How to Get All Post Attachments in WordPress Except for Featured Image is a post from: WPBeginner which is not allowed to be copied on other sites.

Inside the loop right before endwhile, simply add the following code:

<?php
$withcomments = "1";
comments_template(); // Get wp-comments.php template ?>

A single line $withcomments makes all the difference.

Note: this was a very simple one page site we threw up. So the theme elements were style.css, index.php, and comments.php file. We were calling a loop to display a specific page on the index.php file along with other things.

We hope that this would help some of you. Some of you may even have a better way of doing this. If you do, please share it with us in the comments.

How to Show Comments on the Homepage of Your WordPress Theme is a post from: WPBeginner which is not allowed to be copied on other sites.

The final result would look like this:

First thing you need to do is open your theme’s single.php file and add the following code inside the loop most likely after the_content() area:

<div id="cooler-nav" class="navigation">
<?php $prevPost = get_previous_post(true);
if($prevPost) {?>
<div class="nav-box previous">
<?php $prevthumbnail = get_the_post_thumbnail($prevPost->ID, array(100,100) );?>
<?php previous_post_link('%link',"$prevthumbnail  <p>%title</p>", TRUE); ?>
</div>

<?php } $nextPost = get_next_post(true);
if($nextPost) { ?>
<div class="nav-box next" style="float:right;">
<?php $nextthumbnail = get_the_post_thumbnail($nextPost->ID, array(100,100) ); } ?>
<?php next_post_link('%link',"$nextthumbnail  <p>%title</p>", TRUE); ?>
</div>
<?php } ?>
</div><!--#cooler-nav div -->

Next thing you need to do is open your style.css file and add the following styles:

#cooler-nav{clear: both; height: 100px; margin: 0 0 70px;}
#cooler-nav .nav-box{background: #e9e9e9; padding: 10px;}
#cooler-nav img{float: left; margin: 0 10px 0 0;}
#cooler-nav p{margin: 0 10px; font-size: 12px; vertical-align: middle;}
#cooler-nav .previous{float: left; vertical-align: middle; width: 250px; height: 100px;}
#cooler-nav .next{float: right; width: 250px;}

Feel free to change the styling to match it with your theme. Often our users like to style the code, so it makes it easier for them to tweak it. This is just basic styling which you should be able to customize easily.

If you want to change the thumbnail size, then simply change the array(100,100) to whatever you like.

Source: itsbarry

How to use Thumbnails with Previous and Next Post Links in WordPress is a post from: WPBeginner which is not allowed to be copied on other sites.

Note: this tutorial is intended for WordPress theme developers, so it is expected that you know basic html/css and a fair understanding of how WordPress themes work.

Obviously, you need to have custom menu enabled in your themes before you can proceed any further.

Lets start with the basics. We need to add our own filter into wp_nav_menu_items hook. An example would look like this:

add_filter( 'wp_nav_menu_items', 'your_custom_menu_item', 10, 2 );
function your_custom_menu_item ( $items, $args ) {
    if (is_single() && $args->theme_location == 'primary') {
        $items .= '<li>Show whatever</li>';
    }
    return $items;
}

Now as you can see, you can use the conditional statements along with the argument theme_location. This allows you to target a specific menu location with any condition you want. If you don’t want the conditional statement, you don’t have to use it. Just add it to a specific menu location or vice versa.

Now that you have seen a basic example, let us show you some specific examples of how this would work.

Adding Log in/out links to a Specific WordPress Menu

If you want to give your users the ability to log in/out, then one place you can add the links is in your custom menu. The snippet below will show log in/out links to your users appropriately on the menu location: primary. You can change the menu location if you want.

add_filter( 'wp_nav_menu_items', 'add_loginout_link', 10, 2 );
function add_loginout_link( $items, $args ) {
    if (is_user_logged_in() && $args->theme_location == 'primary') {
        $items .= '<li><a href="'. wp_logout_url() .'">Log Out</a></li>';
    }
    elseif (!is_user_logged_in() && $args->theme_location == 'primary') {
        $items .= '<li><a href="'. site_url('wp-login.php') .'">Log In</a></li>';
    }
    return $items;
}

Adding a Search Bar to a Specific Menu

Want to add a search bar to a specific menu? Well look no further. You can do so by pasting the following snippet:

add_filter('wp_nav_menu_items','add_search_box_to_menu', 10, 2);
function add_search_box_to_menu( $items, $args ) {
    if( $args->theme_location == 'primary' )
        return $items."<li class='menu-header-search'><form action='http://example.com/' id='searchform' method='get'><input type='text' name='s' id='s' placeholder='Search'></form></li>";

    return $items;
}

Adding Today’s Date to a Specific WordPress Menu

The snippet below will add today’s date to your WordPress menu. You can use our Today’s Date manual to tweak the code if you want.

add_filter('wp_nav_menu_items','add_todaysdate_in_menu', 10, 2);
function add_todaysdate_in_menu( $items, $args ) {
    if( $args->theme_location == 'primary')  {

		$todaysdate = date('l jS F Y');
        $items .=  '<li>' . $todaysdate .  '</li>';

	}
    return $items;
}

We hope this article will allow developers to expand the functionality of their themes.

How to Add Custom Items to Specific WordPress Menus is a post from: WPBeginner which is not allowed to be copied on other sites.

The goal of this cheat sheet is to assist beginners who are looking to get into WordPress theme styling. If you are a beginner who does not want to deal with the codes, then we recommend that you get a theme framework like Headway which does the whole thing for you with drag and drop. For the rest of you, we are going to go through some of the most important default WordPress styles one by one.

Default Body Class Styles

One of the great things about WordPress is its customizability. It allows you to target very specific aspects of your site with CSS. One of the ways it does this is by adding custom classes to various elements of your blog. The most important of these is the <body> tag. Here are some examples of common classes that WordPress might add to this element:

.rtl {}
.home {}
.blog {}
.archive {}
.date {}
.search {}
.paged {}
.attachment {}
.error404 {}
.single postid-(id) {}
.attachmentid-(id) {}
.attachment-(mime-type) {}
.author {}
.author-(user_nicename) {}
.category {}
.category-(slug) {}
.tag {}
.tag-(slug) {}
.page-parent {}
.page-child parent-pageid-(id) {}
.page-template page-template-(template file name) {}
.search-results {}
.search-no-results {}
.logged-in {}
.paged-(page number) {}
.single-paged-(page number) {}
.page-paged-(page number) {}
.category-paged-(page number) {}
.tag-paged-(page number) {}
.date-paged-(page number) {}
.author-paged-(page number) {}
.search-paged-(page number) {}

If, for example, you would like to style your search results page in a specific way you can use the “search-results” class to add your styling. WordPress only adds this class to the body tag when the search results page is active so it doesn’t affect any other pages.

Default Post Styles

Just like with the body element WordPress adds dynamic classes to the post elements as well. Here is a list of some of the most popular ones:

.post-id {}
.post {}
.page {}
.attachment {}
.sticky {}
.hentry {}
.category-misc {}
.category-example {}
.tag-news {}
.tag-wordpress {}
.tag-markup {}

If you have read our article What, Whys, and How to’s of Post Formats in WordPress 3.1 then you about post formats and how you can display your posts differently according to the format you choose. Once again, WordPress adds dynamic classes to your post using the post_class () function that will allow you to create your own styles for each format. The post_class () function will add a class in the form of “.format-foo” where foo is whatever post format you have chosen ie. gallery, image, etc.

.format-image {}
.format-gallery {}
.format-chat {}
.format-link {}
.format-quote {}
.format-status {}
.format-video {}

Default Menu Styles

In our article called how to style WordPress navigation menus we discuss how you can go about adding your own class to your menu. We are going to assume you have read it and that you gave your nav menu its own class name of “main-menu”.

#header .main-menu{} // container class
#header .main-menu ul {} // container class first unordered list
#header .main-menu ul ul {} //unordered list within an unordered list
#header .main-menu li {} // each navigation item
#header .main-menu li a {} // each navigation item anchor
#header .main-menu li ul {} // unordered list if there is drop down items
#header .main-menu li li {} // each drop down navigation item
#header .main-menu li li a {} // each drap down navigation item anchor

.current_page_item{} // Class for Current Page
.current-cat{} // Class for Current Category
.current-menu-item{} // Class for any other current Menu Item
.menu-item-type-taxonomy{} // Class for a Category
.menu-item-type-post_type{} // Class for Pages
.menu-item-type-custom{} // Class for any custom item that you added
.menu-item-home{} // Class for the Home Link

Notice that whenever you create a menu in WordPress it is automatically wrapped in a div. This div only has a class name if you specify it (we chose “main-menu”). From there you are just styling the various list elements.

Default WISIWYG Editor Styles

The WISWYG editor is one of the most popular and most used aspects of WordPress. For this reason it is a good idea to have styles ready for anything that the user might add to their blog, like images or blockquotes. The following CSS shows you what classes WordPress automatically adds to these elements:

.entry-content img {}
.alignleft, img.alignleft {}
.alignright, img.alignright {}
.aligncenter, img.aligncenter {}
.alignnone, img.alignnone {}

.wp-caption {}
.wp-caption img {}
.wp-caption p.wp-caption-text {}

.wp-smiley {}

blockquote.left {}
blockquote.right {}

.gallery dl {}
.gallery dt {}
.gallery dd {}
.gallery dl a {}
.gallery dl img {}
.gallery-caption {}

.size-full {}
.size-large {}
.size-medium {}
.size-thumbnail {}

You can see that there are several class pertaining just to images. If, for example, the user decides to include a left-aligned image then WordPress will add the “alignleft” class.

Default WordPress Widget Styles

Widgets are another popular aspect of WordPress. As the developer you have control over which widgets are going to be displayed so you will usually know exactly which styles to add. WordPress comes with a handful of default widgets, however, and unless you remove them it is wise to add styling to their classes.

.widget {}

#searchform {}
.widget_search {}
.screen-reader-text {}

.widget_meta {}
.widget_meta ul {}
.widget_meta ul li {}
.widget_meta ul li a {}

.widget_links {}
.widget_links ul {}
.widget_links ul li {}
.widget_links ul li a {}

.widget_archive {}
.widget_archive ul {}
.widget_archive ul li {}
.widget_archive ul li a {}
.widget_archive select {}
.widget_archive option {}

.widget_pages {}
.widget_pages ul {}
.widget_pages ul li {}
.widget_pages ul li a {}

.widget_links {}
.widget_links li:after {}
.widget_links li:before {}
.widget_tag_cloud {}
.widget_tag_cloud a {}
.widget_tag_cloud a:after {}
.widget_tag_cloud a:before {}

.widget_calendar {}
#calendar_wrap {}
#calendar_wrap th {}
#calendar_wrap td {}
#wp-calendar tr td {}
#wp-calendar caption {}
#wp-calendar a {}
#wp-calendar #today {}
#wp-calendar #prev {}
#wp-calendar #next {}
#wp-calendar #next a {}
#wp-calendar #prev a {}

.widget_categories {}
.widget_categories ul {}
.widget_categories ul li {}
.widget_categories ul ul.children {}
.widget_categories a {}
.widget_categories select{}
.widget_categories select#cat {}
.widget_categories select.postform {}
.widget_categories option {}
.widget_categories .level-0 {}
.widget_categories .level-1 {}
.widget_categories .level-2 {}
.widget_categories .level-3 {}

.recentcomments {}
#recentcomments {}
#recentcomments li {}
#recentcomments li a {}
.widget_recent_comments {}

.widget_recent_entries {}
.widget_recent_entries ul {}
.widget_recent_entries ul li {}
.widget_recent_entries ul li a {}

.textwidget {}
.widget_text {}
.textwidget p {}

When styling widgets you will probably end up using the same styles over and over again. For this reason it is a good idea to combine classes on your style sheet using commas. For example, you could combine .widget_pages ul and .widget_archive ul by doing something like this:

.widget_pages ul, .widget_archive ul {}

Default Comment Form Styles

As ugly as styling comments can get WordPress makes it a lot easier with its default classes. If you are not dealing with threaded comments, however, it is possible to ignore many of them.

.commentlist .reply {}
.commentlist .reply a {}

.commentlist .alt {}
.commentlist .odd {}
.commentlist .even {}
.commentlist .thread-alt {}
.commentlist .thread-odd {}
.commentlist .thread-even {}
.commentlist li ul.children .alt {}
.commentlist li ul.children .odd {}
.commentlist li ul.children .even {}

.commentlist .vcard {}
.commentlist .vcard cite.fn {}
.commentlist .vcard span.says {}
.commentlist .vcard img.photo {}
.commentlist .vcard img.avatar {}
.commentlist .vcard cite.fn a.url {}

.commentlist .comment-meta {}
.commentlist .comment-meta a {}
.commentlist .commentmetadata {}
.commentlist .commentmetadata a {}

.commentlist .parent {}
.commentlist .comment {}
.commentlist .children {}
.commentlist .pingback {}
.commentlist .bypostauthor {}
.commentlist .comment-author {}
.commentlist .comment-author-admin {}

.commentlist {}
.commentlist li {}
.commentlist li p {}
.commentlist li ul {}
.commentlist li ul.children li {}
.commentlist li ul.children li.alt {}
.commentlist li ul.children li.byuser {}
.commentlist li ul.children li.comment {}
.commentlist li ul.children li.depth-{id} {}
.commentlist li ul.children li.bypostauthor {}
.commentlist li ul.children li.comment-author-admin {}

#cancel-comment-reply {}
#cancel-comment-reply a {}

Since this is only a cheatsheet there are still many other classes and id’s we may not have covered. If you feel as though something else is important and it belongs on this list please feel free to leave a comment below.

Default WordPress Generated CSS Cheat Sheet for Beginners is a post from: WPBeginner which is not allowed to be copied on other sites.

Note: you need to have a fair understanding of CSS and how the WordPress loop work.

Before we begin, lets take a look at what we are trying to accomplish:

If you notice, the posts on this page are being displayed in a grid. There is a border on the posts on the left hand side, but not on the right hand side. With a normal post loop, all posts follow the same styling, so you will have a right border on both posts which would look weird. Also notice, the spacing are pretty symmetric. Which is again not possible with the normal loop to do for doing something like this. Now that you can see what we are trying to accomplish, lets take a look on how to accomplish it.

First thing you need to do is make sure that your theme has WordPress post thumbnails turned on. You should also think about how you want to resize your WordPress images because you will be needing it.

Once you have got the thumbnails and sizes setup, lets get this thing started. Lets setup our loop queries:

<?php
$counter = 1; //start counter

$grids = 2; //Grids per row

global $query_string; //Need this to make pagination work

/*Setting up our custom query (In here we are setting it to show 12 posts per page and eliminate all sticky posts*/
query_posts($query_string . '&caller_get_posts=1&posts_per_page=12');

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

The code above seems pretty straight forward because we have made inline comments. One thing that you probably would need to edit is posts_per_page variable to suit your needs. You can also add other query parameters if you so desire. Now that we got the loop started, lets look at how we want to display the posts inside it.

<?php
//Show the left hand side column
if($counter == 1) :
?>
			<div class="griditemleft">
				<div class="postimage">
					<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail('category-thumbnail'); ?></a>
				</div>
                <h2><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
			</div>
<?php
//Show the right hand side column
elseif($counter == $grids) :
?>
<div class="griditemright">
				<div class="postimage">
					<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail('category-thumbnail'); ?></a>
				</div>
                <h2><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
			</div>
<div class="clear"></div>
<?php
$counter = 0;
endif;
?>

We start the code by checking to see if the counter is 1 which means to show our left grid. We simply go in and start a div with a custom css class “griditemleft”. Inside it we added the post thumbnail and the post title. You can add or subtract any loop elements (such as excerpts, dates, author info, comment count etc). Notice: In our thumbnails, we are calling an additional image size. You will probably have to replace the size-name with your own size that you created.

After the first grid, we added an elseif that looks to see if the $counter matches the number specified in our $grids (which it should because we will be on the second post). If the counter matches, then we can show our right grid which starts with a custom css class “griditemright”. Notice after we close the griditemright div, we are adding a clear class. This we will explain when we get to the CSS part.

After the loop is done with this, we reset the counter to 0, so it can start again in the next row.

We can simply end the loop that we started by adding this code:

<?php
$counter++;
endwhile;
//Post Navigation code goes here
endif;
?>

The code above basically is continuing the counter until it hits the limit that is specified in our query_post variable. The reason why we didn’t add the post navigation code above is because many folks use a plugin or different display method for this. So we are leaving it open for you to decide for yourself.

So our final loop code will look like this:

<?php
$counter = 1; //start counter

$grids = 2; //Grids per row

global $query_string; //Need this to make pagination work

/*Setting up our custom query (In here we are setting it to show 12 posts per page and eliminate all sticky posts) */
query_posts($query_string . '&caller_get_posts=1&posts_per_page=12');

if(have_posts()) :	while(have_posts()) :  the_post();
?>
<?php
//Show the left hand side column
if($counter == 1) :
?>
			<div class="griditemleft">
				<div class="postimage">
					<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail('category-thumbnail'); ?></a>
				</div>
                <h2><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
			</div>
<?php
//Show the right hand side column
elseif($counter == $grids) :
?>
<div class="griditemright">
				<div class="postimage">
					<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail('category-thumbnail'); ?></a>
				</div>
                <h2><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
			</div>
<div class="clear"></div>
<?php
$counter = 0;
endif;
?>
<?php
$counter++;
endwhile;
//Pagination can go here if you want it.
endif;
?>

Now that we have the PHP code ready, lets look at how we are going to style it.

Our default output would look like this:

<div id="gridcontainer">
<div class="griditemleft">
<div class="postimage">	Post Image</div>
<h2>Post Title</h2>
</div>
<div class="griditemright">
<div class="postimage">	Post Image</div>
<h2>Post Title</h2>
</div>
<div class="clear"></div>
</div>

Here are the classes that you need to modify:

#gridcontainer{margin: 20px 0; width: 100%; }
#gridcontainer h2 a{color: #77787a; font-size: 13px;}
#gridcontainer .griditemleft{float: left; width: 278px; margin: 0 40px 40px 0;}
#gridcontainer .griditemright{float: left; width: 278px;}
#gridcontainer .postimage{margin: 0 0 10px 0;}

We hope that this tutorial steers you in the right direction towards making a grid loop display for your WordPress posts.

How to Create a Grid Display of Post Thumbnails in WordPress Themes is a post from: WPBeginner which is not allowed to be copied on other sites.

Now you are probably wondering why it was tricky to get it into WordPress when wp_get_archives() list the archives monthly with the year next to it? Well that is because this client only wanted to show the year once on it’s left. There is no real way to customize the styling of the wp_get_archives() function.

We looked around the web for solutions and came across nothing. This issue has to be really rare however we found that Andrew Appleton had the similar issue, and he had a fix for it. We used his codes with a small bits of modification.

Andrew’s code did not have a limit parameter for the archives. So using his codes would mean that you will show all archives month. Imagine that for a blog that is 5 years old. So we added a limit parameter which allowed us to limit the number of months displayed to 18 at any given time.

So basically what you need to do is paste the following code in your theme’s sidebar.php file or any other file where you want to display custom WordPress archives:

<?php
global $wpdb;
$limit = 0;
$year_prev = null;
$months = $wpdb->get_results("SELECT DISTINCT MONTH( post_date ) AS month ,	YEAR( post_date ) AS year, COUNT( id ) as post_count FROM $wpdb->posts WHERE post_status = 'publish' and post_date <= now( ) and post_type = 'post' GROUP BY month , year ORDER BY post_date DESC");
foreach($months as $month) :
	$year_current = $month->year;
	if ($year_current != $year_prev){
		if ($year_prev != null){?>

		<?php } ?>

	<li class="archive-year"><a href="<?php bloginfo('url') ?>/<?php echo $month->year; ?>/"><?php echo $month->year; ?></a></li>

	<?php } ?>
	<li><a href="<?php bloginfo('url') ?>/<?php echo $month->year; ?>/<?php echo date("m", mktime(0, 0, 0, $month->month, 1, $month->year)) ?>"><span class="archive-month"><?php echo date("F", mktime(0, 0, 0, $month->month, 1, $month->year)) ?></span></a></li>
<?php $year_prev = $year_current;

if(++$limit >= 18) { break; }

endforeach; ?>

Note: If you want to change the number of months displayed, then you need to change line 19 where the current $limit value is set to 18.

Our CSS looked a bit like this:

.widget-archive{padding: 0 0 40px 0; float: left; width: 235px;}
.widget-archive ul {margin: 0;}
.widget-archive li {margin: 0; padding: 0;}
.widget-archive li a{ border-left: 1px solid #d6d7d7; padding: 5px 0 3px 10px; margin: 0 0 0 55px; display: block;}
li.archive-year{float: left; font-family: Helvetica, Arial, san-serif; padding: 5px 0 3px 10px; color:#ed1a1c;}
li.archive-year a{color:#ed1a1c; margin: 0; border: 0px; padding: 0;}

So by doing it this way, we had the final outcome to look like this:

Now if you want to show the count of posts in each month, then you would need to add this bit of code anywhere in between line 12 – 16 of the above code:

<?php echo $month->post_count; ?>

One example of what you can do with the post count and everything can be seen in the image below:

The above picture was taken from Andrew Appleton’s site because that was the solution he came up with from which we derived our style. If you want to see the css for his styles, then simply click on his website link above.

Do you know of an easier way of accomplishing this? Will you be customizing the display of your WordPress Archives in the next design? Please share your thoughts in the comment box below.

How to Customize the Display of WordPress Archives in Your Sidebar is a post from: WPBeginner which is not allowed to be copied on other sites.

Edit: Apparently after writing this article, the most awesome Otto (@otto42) replied on my Google+ account to let me know that there is a simpler way of accomplishing this.

First you need to open your theme’s functions.php file and add this function:

add_filter('term_links-post_tag','limit_to_five_tags');
function limit_to_five_tags($terms) {
return array_slice($terms,0,5,true);
}

You can change the 5 number to maximum count you want.

Then open your loop.php, single.php, index.php, or wherever you want to add these post tags (must be inside a post loop), then paste the following code:

<?php the_tags() ?>

This is definitely a lot simpler than what I had come up with which I will leave in this post for those who care.

Old Complicated Method

All you need to do is paste the following code in your theme file (inside the post loop):

<?php
$posttags = get_the_tags();
$count=0; $sep='';
if ($posttags) {
	echo 'Tags: ';
	foreach($posttags as $tag) {
		$count++;
		echo $sep . '<a href="'.get_tag_link($tag->term_id).'">'.$tag->name.'</a>';
$sep = ', ';
		if( $count > 5 ) break; //change the number to adjust the count
	}
}
?>

The code above will display 6 tags in the theme. If you want to show less tags or more tags, simply adjust the $count > 5 line with the number you want. Remember, even though the count number says greater than 5, we see 6 tags. That is because the count is starting at 0. So if you want to show only 4 tags, then the number would need to be 3.

If you want to change the separator, then you need to change line 9. The current code will separate by commas. You can also customize the styling by adding divs, list elements, or anything else that you like.

How to Show Limited Number of Tags after Posts in your WordPress Theme is a post from: WPBeginner which is not allowed to be copied on other sites.

All you have to do is paste the following code in your theme file where you want to display the comment count:

<fb:comments-count href="<?php echo get_permalink($post->ID); ?>"></fb:comments-count> Comments

Hope you will find this handy while designing your WordPress themes.

How to Display the Facebook Comment Count in WordPress Theme is a post from: WPBeginner which is not allowed to be copied on other sites.