Here is our menu of Admin Bar Tricks for WordPress 3.1 and better:

• Disable the Admin Bar for individual users
• Disable the Admin Bar for all users of the current theme
• Disable the Admin Bar for non-Admins only
• Always show the Admin Bar
• Move the Admin Bar to the bottom
• Add or Remove links from the Admin Bar
• Clean up User Profile Page
• Disable and Customize the Admin Bar with Plugins
• Even More Admin Bar Resources

Disable the Admin Bar for individual users

By default, each registered user has the option of showing the Admin on the frontend and/or back-end of the site. Thus, to change your preferences, just visit Users > Your Profile and choose your options as seen here:

Unfortunately, this gets kind of tedious when customizing profiles for many users. Fortunately, we’re just getting started, so read ahead to see more efficient ways of disabling and modifying the WordPress Admin Bar.

Disable the Admin Bar for all users of the current theme

To cleanly disable the Admin Bar for all users of your theme (and thus your site), add this snippet to your theme’s functions.php file:

// disable the admin bar
show_admin_bar(false);

Alternately, you may use this method, which filters the show_admin_bar function:

// disable the admin bar
add_filter('show_admin_bar', '__return_false');

Another option is to hide the Admin Bar using CSS. To do so, paste this into your
theme’s style.css (or other stylesheet):

/* hide the admin bar */
#wpadminbar { display:none; }

Disable the Admin Bar for non-Admins only

Expanding on the previous example, here are two snippets that disable the Admin Bar for non-Admins and Editors. Place either of the following in functions.php:

// show admin bar only for admins
if (!current_user_can('manage_options')) {
	add_filter('show_admin_bar', '__return_false');
}
// show admin bar only for admins and editors
if (!current_user_can('edit_posts')) {
	add_filter('show_admin_bar', '__return_false');
}

As you might guess, any setting may be used for current_user_can(), so it’s easy to show/hide the Admin Bar for any particular group of users.

Clean up User Profile Page

After disabling the Admin Bar, you may want to hide its display settings in each user’s Profile Page. The easiest way to do this is with a simple function:

function hideAdminBar() { ?>
<style type="text/css">.show-admin-bar { display: none; }</style>
<?php }
add_action('admin_print_scripts-profile.php', 'hideAdminBar');

Just place that in your theme’s functions.php and you’re good to go. No more Admin Bar Settings displayed in the Admin area.

Always show the Admin Bar

Follow the white rabbit shows us how to show the Admin Bar even when logged out. As a bonus, a handy “Log in” button is added to the bar for easy maneuvering. Just add the following snippet to your theme’s functions.php file:

// always show admin bar
function pjw_login_adminbar( $wp_admin_bar) {
	if ( !is_user_logged_in() )
	$wp_admin_bar->add_menu( array( 'title' => __( 'Log In' ), 'href' => wp_login_url() ) );
}
add_action( 'admin_bar_menu', 'pjw_login_adminbar' );
add_filter( 'show_admin_bar', '__return_true' , 1000 );

You can see it in action at follow the white rabbit.

Move the Admin Bar to the bottom

Want to display the Admin Bar at the bottom of the page instead of the top? WPengineer shows us how with this bit of CSS via the functions.php file:

// move admin bar to bottom
function fb_move_admin_bar() { ?>
	<style type="text/css">
		body {
			margin-top: -28px;
			padding-bottom: 28px;
		}
		body.admin-bar #wphead {
			padding-top: 0;
		}
		body.admin-bar #footer {
			padding-bottom: 28px;
		}
		#wpadminbar {
			top: auto !important;
			bottom: 0;
		}
		#wpadminbar .quicklinks .menupop ul {
			bottom: 28px;
		}
	</style>
<?php }
// on backend area
add_action( 'admin_head', 'fb_move_admin_bar' );
// on frontend area
add_action( 'wp_head', 'fb_move_admin_bar' );

This code adds the required CSS to both the front-end (public pages) and back-end (admin pages). To disable for one or the other, just comment-out or remove the corresponding add_action() line near the end of the code. You could also just copy/paste the CSS into your theme’s style.css file if you only need to move it on the front-end of your site. An even easier way is provided by Coen Jacobs’ Stick Admin Bar To Bottom plugin that makes it happen automagically.

Add or Remove links from the Admin Bar

WPMU.org shows us how to add/remove links from the Admin Bar. This is especially useful for MultiSite networks, where all of the extra links may not be necessary. The following code may be used to remove links and/or menus (via functions.php:

// remove links/menus from the admin bar
function mytheme_admin_bar_render() {
	global $wp_admin_bar;
	$wp_admin_bar->remove_menu('comments');
}
add_action( 'wp_before_admin_bar_render', 'mytheme_admin_bar_render' );

For this example, we use remove_menu('comments') to remove the comments dropdown list. To remove a different link/menu, check /wp-includes/admin-bar.php for the corresponding ID. Here’s a list of some of them to get you started:

• my-account – link to your account (avatars disabled)
• my-account-with-avatar – link to your account (avatars enabled)
• my-blogs – the “My Sites” menu if the user has more than one site
• get-shortlink – provides a Shortlink to that page
• edit – link to the Edit/Write-Post page
• new-content – link to the “Add New” dropdown list
• comments – link to the “Comments” dropdown
• appearance – link to the “Appearance” dropdown
• updates – the “Updates” dropdown

To add links/menus to the Admin Bar, add the following code to your functions.php file:

// add links/menus to the admin bar
function mytheme_admin_bar_render() {
	global $wp_admin_bar;
	$wp_admin_bar->add_menu( array(
		'parent' => 'new-content', // use 'false' for a root menu, or pass the ID of the parent menu
		'id' => 'new_media', // link ID, defaults to a sanitized title value
		'title' => __('Media'), // link title
		'href' => admin_url( 'media-new.php') // name of file
		'meta' => false // array of any of the following options: array( 'html' => '', 'class' => '', 'onclick' => '', target => '', title => '' );
	));
}
add_action( 'wp_before_admin_bar_render', 'mytheme_admin_bar_render' );

You’ll want to adjust the parameters to fit your needs, and don’t forget to see the Codex for additional information. For even more insight into this technique, see WPengineer’s post on adding menus to the Admin Bar.

Disable and Customize the Admin Bar with Plugins

Almost immediately after the Admin Bar was added to the WordPress core, plugins started popping up to disable it, move it, minimize it, and more. Here’s a quick list of plugins and links for ultimate control over the Admin Bar.

• Admin Bar Disabler
• Admin Bar Minimiser
• Admin Bar Removal
• Global Hide/Remove Admin Bar Plugin
• Hide Admin Bar Search
• Stick Admin Bar To Bottom
• WP Custom Admin Bar

If you know of others, mention them in the comments and we’ll add them to the list!

More Admin-Bar Resources

Here are some excellent resources for more information on the WordPress Admin Bar.

• WP Codex: Administration Menus
• WP Codex: Function Reference/add menu
• How to disable the WordPress Admin Bar
• What Everybody Ought to Know about the WordPress Admin Bar

Like the article? Get the book!

© 2011 Digging into WordPress | Permalink | 2 comments | Add to
Delicious
Categorized: Admin | Tagged: Admin, admin-bar, tips, tricks

This post was generated by an RSS Feed from Digging Into WordPressYou may also like to read:

• How to show an urgent message in the WordPress admin area
• Specify Unique CSS File Per Post
• How to disable image caption in WordPress post editor
• WordPress Tip: Remove nofollow Attributes from Post Content
• Custom Page Titles from Scratch

Admin Bar Tricks is a post from: Build Me A Fab Website

/**
 * Generic function to show a message to the user using WP's
 * standard CSS classes to make use of the already-defined
 * message colour scheme.
 *
 * @param $message The message you want to tell the user.
 * @param $errormsg If true, the message is an error, so use
 * the red message style. If false, the message is a status
  * message, so use the yellow information message style.
 */
function showMessage($message, $errormsg = false)
{
	if ($errormsg) {
		echo '<div id="message" class="error">';
	}
	else {
		echo '<div id="message" class="updated fade">';
	}

	echo "<p><strong>$message</strong></p></div>";
}

Now we just add a hook to the admin notices function to show our custom message.

/**
 * Just show our message (with possible checking if we only want
 * to show message to certain users.
 */
function showAdminMessages()
{
    // Shows as an error message. You could add a link to the right page if you wanted.
    showMessage("You need to upgrade your database as soon as possible...", true);

    // Only show to admins
    if (user_can('manage_options') {
       showMessage("Hello admins!");
    }
}

/**
  * Call showAdminMessages() when showing other admin
  * messages. The message only gets shown in the admin
  * area, but not on the frontend of your WordPress site.
  */
add_action('admin_notices', 'showAdminMessages');

And that’s all there is to it!

Thanks to Dan Harrison of WordPress Doctors for the tip!

This post was generated by an RSS Feed from WP RecipesYou may also like to read:

• Custom Page Titles from Scratch
• Display most recent comments with Gravatar
• How to Build a Top Sliding Login Panel
• Add Private Content to Posts via Shortcode
• Specify Unique CSS File Per Post

How to show an urgent message in the WordPress admin area is a post from: Build Me A Fab Website

wordpress blogs and google ads is most common thing in blogs. Through google ads you can earn easily money. Many times many people search for how to place the google ads in wordpress sites.

Some times they spend so much time for checking google adsense ready wordpress themes. But I always prefer to use the text widget from wordpress widget section. Through this text widget panel you can add the google ads to your wordpress sites.

First you need to login to your wordpress admin panel. Go to Apperance->widget section.

You will find text widget in that page. Just drag text widget to your sidebar section. putting the google ad in top sidebar section is good for earning good amount of money. Right top side you will find the arrow button, just click on that and put your google ad code in textarea.

I used following code. You can also use the following google ad code for testing purpose.

<script type="text/javascript"><!--
google_ad_client = "ca-pub-4949877136251097";
/* wordpressapi - 336x280 size */
google_ad_slot = "3956087267";
google_ad_width = 336;
google_ad_height = 280;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js"&gt;
</script>

In title section write “Sponsors” word and then click on save button as per shown in following image.

how to easily add google ad through text widget in wordpress

After this check your webpage. You can able to see your google ad on your wordpress site.I given the sample image. how your ad will be shown in wordpress site sidebar panel.

This tutorial is written by wordpressapi.com. If you are facing any issue then please write to me on wordpressapi@gmail.com

Follow us on Twitter WordPress API

Link post in your Website! – how to easily add google ad through text widget in wordpress, Post is Written By WordPressAPI
This post was generated by an RSS Feed from WordPress APIYou may also like to read:

• how to add post thumbnail on home page in wordpress
• Free wordpress 3.0 ready themes of 2011
• 10 great wordpress plugins for facebook
• How to Build a Top Sliding Login Panel
• Postage Sydney

how to easily add google ad through text widget in wordpress is a post from: Build Me A Fab Website

Many times many wordpress blog and website users asked me about adding the post thumbnail on home page. Many people download the free themes from internet and they want to add the post thumbnail on homepage. In this tutorial I will tell you how to add post st thumbnail on homepage.

First step open your functions.php file from wordpress theme folder and add following code in that file.

add_theme_support( 'post-thumbnails' );

Then open your index.php file and find the the_content or the_excerpt text. If you not find this text in this file then open your loop.php file from wordpress theme folder and find the_content or the_excerpt in that file. Before this tag you need to put following code in that file.

<div class="imgshadow"><a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php the_post_thumbnail(array(500,400), array('class' => 'imgshadowleft')); ?></a></div>

You need to specify your thumbnail size Here I chosen 500×400 size for me. Normally people choose the 150×150 or 200×200 size. After that use following css code for styling.

put following code in your style.css file.

.imgshadow{float:left; margin-right:5px}

How to set post thumbnail for home page?

Go to wordpress admin panel and create new post. you will find the “Featured Image” section bottom on right side panel. Click on “Set featured image” link.

Then you need to upload the image and you will find option called “use as featured image” link. Just click on that image. For help you can refer following image.

This way you can easily add the post thumbnail to your home page. For more information about wordpress thumbnail image you can read the following articles. In following you can got very detailed information about wordpress thumbnail and featured images.

Show Post Thumbnail or Featured image in WordPress RSS Feed

Add the Custom Thumbnail Size to wordpress

How to set post first image as featured image automatically

How to use the the_post_thumbnail In WordPress 3.0

Incoming search terms:

• add post thumbnail to home page

Follow us on Twitter WordPress API

Link post in your Website! – how to add post thumbnail on home page in wordpress, Post is Written By WordPressAPI
This post was generated by an RSS Feed from WordPress APIYou may also like to read:

• How to Build a Top Sliding Login Panel
• how to easily add google ad through text widget in wordpress
• Randomized Grid of Posts
• 10 More WordPress Hacks for Easy Life
• WordPress tip : change excerpt length depending of the category

how to add post thumbnail on home page in wordpress is a post from: Build Me A Fab Website

More then 13 million sites are made in wordpress and facebook is world’s most famous social networking site. Every website and there owners want to integrate facebook functionality in there site. Here we created the list of great ten wordpress plugins which is useful for facebook integration.

Simple Facebook Connect

http://wordpress.org/extend/plugins/simple-facebook-connect/
Simple Facebook Connect is a series of plugins that let you add any sort of Facebook Connect functionality you like to a WordPress blog. This lets you have an integrated site without a lot of coding, and still letting you customize it exactly the way you’d like.

First, you activate and set up the base plugin, which makes your site have basic Facebook Connect functionality. Then, each of the add-on plugins will let you add small pieces of specific Facebook-related functionality, one by one.

Facebook Tab Manager

http://wordpress.org/extend/plugins/facebook-tab-manager/

The Facebook Tab Manager allows you to create landing pages and other types of content to be displayed within Facebook, particularly within the tabs that appear on Facebook business pages and pages for other types of organizations. This provides a way of putting more interesting layouts and functionality into your Facebook pages, without the need to get too deep into fancy programming.

The Facebook Tab Manager was specifically designed to take advantage of a recent Facebook page redesign that added support for iframe tabs on Facebook pages. Optionally, you can now also specify content to be displayed on an associated canvas page.

Tab content can include most any WordPress content, including output from Shortcodes and other plugin functions.

Facebook Members

http://wordpress.org/extend/plugins/facebook-members/
Facebook Members is a WordPres Social Plugin that enables Facebook Page owners to attract and gain Likes from their own website. It uses Facebook Like Box.

See how many users already like this page, and which of their friends like it too. Read recent posts from the page Like the page with one click, without needing to visit the page. Get more visitors and more traffic to your site by getting more Facebook Fans.

Facebook Like for Tags

http://wordpress.org/extend/plugins/like-for-tags/
Pack more punch into Facebook Like. Expand from a one-time sharing event, to a permanent connection for ongoing updates and sharing based on post tags or categories. Now with money earning opportunities! Write your WordPress blog posts as you normally would. Define your posting with appropriate tags or categories. Once posted, it will have a Facebook Like button linked to it via the tags/categories you defined. Any reader who clicks the Facebook Like button will share the article but also receive additional updates anytime you write a post specifying the same tags.

Facebook Registration Tool

http://wordpress.org/extend/plugins/facebook-registration-tool/

This plugin integrates the Facebook Registration Tool (http://developers.facebook.com/docs/user_registration) into WordPress. For more information and support of this plugin, see: http://beyondwp.com/2010/12/21/facebook-registration-plugin-for-wordpress/

From beyondwp.com:

The Facebook Registration Tool, as announced by Facebook Developer Paul Tarjan (http://developers.facebook.com/blog/post/440) provides a registration mechanism that is both Facebook user and Facebook hold-out friendly. Facebook Login (the tool formerly known as Facebook Connect) is a great solution to integrate Facebook into your site, but is not friendly to those users who don’t have or utilize their own Facebook accounts. By utilizing this registration tool, Facebook can automatically complete the registration form for Facebook users while supplying a good-ole fashioned form for those not wanting or able to utilize Facebook to register.

Embed Facebook

http://wordpress.org/extend/plugins/embed-facebook/
Embed Facebook lets you embed various Facebook objects (album, event, group, note, photo, or video) in a post or page. You just need to paste the URL of a Facebook object anywhere in a post or page, the plugin will automatically embed it for you. Check “Screenshots” for how the embedded objects look.

The object must be public (i.e. they should belong to a Facebook Page. Your personal albums are not embeddable.)

WordPress Facebook Grabber

http://wordpress.org/extend/plugins/wordpress-facebook-grabber/
Wp Facebook Grabber plugin provide a way to take public content from facebook and insert in your WordPress pages or posts. It works usin graph facebook api and json php/jquery function.

Actually the plugin support Facebook Photo Album and Feed data from Facebook profile. You can put your feed status update and photo album from facebook everywhere in wordpress post or page, and theme it using css stylesheet.

WP-Facebook Intergrate

http://wordpress.org/extend/plugins/wordpress-facebook-integrate/
Integrate wordpress with facebook, utilizing open graph and social plugins.Use Facebook social plugins and open graph to integrate Facebook into your wordpress site.

Facebook Activity Feed Widget for WordPress

http://wordpress.org/extend/plugins/facebook-activity-feed-widget-for-wordpress/
The FaceBook Activity Feed Widget for WordPress displays the most interesting recent activity taking place on your web site based on feedback from Facebook users.

The activity feed displays stories both when users like content on your site and when users share content from your site back to Facebook.

Faux Facebook Connect

http://wordpress.org/extend/plugins/faux-facebook-connect/
Faux Facebook Connect is a basic integration to allow Facebook users to comment on a WordPress blog. It provides single sign on, and avatars. It is tuned for WordPress MU usage as it does not perform any database alterations or adds any users and is mainly a javascript integration. It requires a Facebook API Key for use. Thanks go to Beau Lebens for writing a good introduction and Adam Hupp for his inspireing WP-Facebookconnect plugin

Following articles is also useful for adding the facebook like button and connect code in your website.

http://wordpressapi.com/2011/03/19/share-buttons-in-wordpress-without-wordpress-plugin/

http://wordpressapi.com/2010/12/08/generate-facebook-fan-code/

If you need more infromation about wordpress and facebook integration then search in my website, http://wordpressapi.com

Follow us on Twitter WordPress API

Link post in your Website! – 10 great wordpress plugins for facebook, Post is Written By WordPressAPI
This post was generated by an RSS Feed from WordPress APIYou may also like to read:

• Recommended WordPress Plugin – Facebook ‘Like’ Button
• Best wordpress plugins for wordpress security and protection
• Seven Must Have WordPress Plugins You Need to be Using
• SEO Steps to take after Installing WordPress Theme
• How do I install a WordPress plugin on my WordPress blog?

10 great wordpress plugins for facebook is a post from: Build Me A Fab Website

Then, paste the following code in the window textarea. Don’t forget to modify the password and username before executing it. Also, make sure you have a backup of your database before executing any SQL queries.

UPDATE wp_users SET user_login = 'New login' WHERE user_login = 'Admin';

This post was generated by an RSS Feed from WP RecipesYou may also like to read:

• WordPress tip: Get rid of unused post revisions
• How to Build a Top Sliding Login Panel
• WordPress tip: Quickly secure plugin files
• What to do when Auto-Update Fails
• How to show an urgent message in the WordPress admin area

How to manually update your WordPress login is a post from: Build Me A Fab Website

What an auto-update failure looks like

After initiating the auto-update of the WordPress core (say, from 3.1.0 to 3.1.1), the “Update WordPress” screen will begin displaying the status of each step, beginning with these messages:

• Downloading update from http://wordpress.org/wordpress-3.1.1.zip…
• Unpacking the update…
• Verifying the unpacked files…
• Installing the latest version…

So far so good, but even if it gets that far, there’s still a chance of failure, as seen in this recent screenshot:

The status message that appears just before “Installation Failed” explains what WordPress thinks is the issue, but there are cases where things go wrong and no messages are displayed. In either case, the user can get locked out of the site. When this happens, trying to load any of your pages – admin, blog, login, etc. – gets you the nothing but the WordPress maintenance page:

Briefly unavailable for scheduled maintenance.
Check back in a minute.

Very frustrating, and very difficult to fix things when you can’t log in to Admin. Fortunately, you don’t need Admin to fix it and get back in. Just FTP your way to the root directory and delete the .maintenance file. The name begins with a dot, so if you don’t see it using your FTP program, try logging into your server’s control panel and using the file manager to find and delete. Here is a screenshot showing the .maintenance file in the root installation directory:

This file contains a variable that is used by the wp_maintenance function. It looks like this:

<?php $upgrading = 1302115706; ?>

If you get locked out of your site, deleting the .maintenance file will fix the issue and get you back into Admin and other areas of your site. Once there, WordPress may remind you of the recent update failure by displaying the following message:

An automated WordPress update has failed to complete – please attempt the update again now.

At this point, you have (at least) two choices: keep trying with auto-updates or download the latest version and upload manually. Even if you decide to upgrade manually, you may want to resolve the issue and get auto-updates working for future versions.

Check File Permissions

Proper file permissions are the key to smooth auto-anything. On the Codex Page for the Dashboard Updates SubPanel, the Troubleshooting section advises the following:

Make sure that your entire wordpress directory is owned by the username under which your Apache server runs. For example, if your server runs as https, and your files live in /var/wordpress do a “chown -R apache.apache /var/wordpress.”

In addition to this advice, you may also try changing the permissions of your /upgrade/ directory. As seen in the following screenshot, WordPress uses the /upgrade/ directory for a temporary file used during the installation process:

For the temporary WordPress file to be created, the /upgrade/ directory needs to be writable by the server. To see if this is the issue, try setting the directory permissions to 777 (or CHMOD equivalent) and trying the auto-update again. If it works, you’ve resolved the issue, but you should always use the most restrictive permissions possible. This may take some research, experimenting, and/or a Help ticket with your host, but once you get it, you’re all set for auto-updates. Here is an Online CHMOD Calculator to help with the conversion process.

Turn Off Safe Mode

If possible, disabling Safe Mode may help to get auto-updates working again. According to the PHP Manual, Safe Mode is deprecated as of PHP version 5.3.0:

This feature has been DEPRECATED as of PHP 5.3.0.
Relying on this feature is highly discouraged.

Disabling Safe Mode is done in a variety of ways. If disabling through your server’s control panel isn’t possible, you can use this snippet in your php.ini file:

safe_mode = Off

Or this snippet in your Apache configuration file:

<Directory /var/www/public>
 php_admin_flag safe_mode off
</Directory>

Just add that code to your httpd.conf file and restart Apache.

Define FTP Variables in wp-config.php

As discussed, another way to get auto-updates working is to define the requisite variables in your wp-config.php file. There are numerous variations on this technique, so you’ll need to do your own experimentation to get a set of definitions that work for your situation. Here is what works for me on Media Temple’s (dv) server:

define('FS_CHMOD_FILE', 0755);
define('FS_CHMOD_DIR', 0755);
define('FS_METHOD', 'ftpext');
define('FTP_BASE', '/httpdocs/');
define('FTP_CONTENT_DIR', '/httpdocs/wp-content/');
define('FTP_PLUGIN_DIR ', '/httpdocs/wp-content/plugins/');
define('FTP_USER', 'username');
define('FTP_PASS', 'password');
define('FTP_HOST', '123.456.789');
define('FTP_SSL', false);

Place that in your wp-config.php file, just above the line that says, “That’s all, stop editing! Happy blogging.” Don’t forget to edit the username, password, and any other variables with your own information.

If you’re asking yourself why bother with all of this information, it’s because WordPress auto-updates features is SO awesome that it’s worth resolving any issues to get it working. Together with automatic plugin and theme updates, auto-WordPress updates have saved us many hours of work. For some sites, auto-updates works perfectly, for others, not so much. Just remember what you’re playing for here – it looks like this and will make keeping up with WordPress updates a much more enjoyable experience.

This post was generated by an RSS Feed from Digging Into WordPressYou may also like to read:

• Why All-In-One SEO Deactivates
• Pimp your wp-config.php
• Best wordpress plugins for wordpress security and protection
• Create a Custom Database Error Page in WordPress
• Google has released a major ranking algorithm update

What to do when Auto-Update Fails is a post from: Build Me A Fab Website

1. Create a page template, publish a page

We need a totally unique page template to work with. So create a new one. You know, just make a file like grid-archives.php in your theme and put this PHP comment at the top and then WordPress will recognize it. Then create a new page, pick this template, and publish it. The name and content absolutely don’t matter, just put something there so you can recognize/find it later.

<?php
/*
Template Name: Thumb Archives - Grid
*/
?>

2. Loop it

This is pretty much the entire page. We’ll link out to an external stylesheet for styling. Then we run a Loop for 25 posts (in our demo, we also remove our link style posts). Each post is an anchor tag, and within, the post title, the post image thumbnail, and the excerpt.

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8" />
<title>Grid Archives | Digging Into WordPress
</title>
<link rel="stylesheet" type="text/css"
media="all" href="<?php bloginfo("template_url")
; ?>/css/gridarchives.css" />
</head>

<body>
<div id="page-wrap">
<?php query_posts('posts_per_page=25&cat=-52'); ?>
<?php if (have_posts()) : while (have_posts())
: the_post(); ?>
<a href="<?php the_permalink(); ?>" class="box
col<?php echo rand(2,4); ?>">
<span class="title"><?php the_title(); ?></span>
<img src="<?php echo get_post_meta($post->ID,
'PostThumb', true); ?>" alt="" />
<span class="ex"><?php the_excerpt(); ?></span>
</a>
<?php endwhile; endif; ?>
</div>
</body>

</html>

3. Masonize

Notice in the HTML above we echo’d out a random number between 2 and 4 as part of a class name. The results classes will be: col-2, col-3, and col-4. These represent columns. So each link box is “randomized” based on this class name. Some post link boxes are 2 columns wide, others 3, others 4. Font sizing and thumbnail sizing also adjusts accordingly.

.box { margin: 10px; float: left; }
.box:hover { outline: 2px solid white; }
.box:hover .title { background: none; }
.box:hover .ex { background: none; color: white; }
.box:hover img { opacity: 0.4; }

.col2 { width: 180px; }
.col3 { width: 280px; }
.col4 { width: 380px; }

.col2 img { max-width: 80px; float:
right; margin: 0 0 2px 10px; }
.col3 img { max-width: 100px; float:
left; margin: 0 10px 2px 0; }
.col4 img { max-width: 120px; float:
right; margin: 0 0 2px 10px; }

.title { background: #237abe; color:
white; display: block; padding: 10px;
overflow: hidden; }
.col2 .title { font-size: 16px; }
.col3 .title { font-size: 18px; }
.col4 .title { font-size: 20px; }

.ex { background: white; color: #222;
display: block; padding: 10px; }
.col2 .ex { font-size: 11px; }
.col3 .ex { font-size: 12px; }
.col4 .ex { font-size: 13px; }

So each of those post link boxes is just floated to the left. That’s going to make a pretty ragged and nasty layout all by itself, because each box will be a different height depending on the length of the title and excerpt. No problem though, we’re going to rearrange the boxes using the jQuery Masonry plugin by David DeSandro. We’ll just call jQuery, the plugin, and the write a quick script to call it. This can go pretty much anywhere on the page. Typically jQuery is run on DOM ready, but in this case we are waiting for the window’s load event, because we want to wait for the thumbnails to load before masonizing.

<script src='http://ajax.googleapis.com
/ajax/libs/jquery/1.4/jquery.min.js'>
</script>
<script src='<?php bloginfo("template_
url"); ?>/js/jquery.masonry.min.js'>
</script>
<script>
 $(window).load(function() {
   $("#page-wrap").masonry({
      columnWidth: 100,
      animate: true,
      animationOptions: {
          duration: 300,
          queue: false
      }
  });
 });
</script>

Enjoy!

Here is ours. Let us know if you play with this on your own site at all.

This post was generated by an RSS Feed from Digging Into WordPressYou may also like to read:

• How to Build a Top Sliding Login Panel
• WordPress tip : Better page navigation
• how to add post thumbnail on home page in wordpress
• 10 CSS Snippets to Save Precious Time
• How to modify lists like ‘Categories’ and ‘Blogroll’ in WordPress?

Randomized Grid of Posts is a post from: Build Me A Fab Website

Simply paste the following code where you want the feed to be displayed. Don’t forget to define feed url at line 4.

<?php if(function_exists('fetch_feed')) {

	include_once(ABSPATH.WPINC.'/feed.php');
	$feed = fetch_feed('http://feeds.
feedburner.com/catswhoblog');

	$limit = $feed->get_item_quantity(7);
 // specify number of items
	$items = $feed->get_items(0, $limit
// create an array of items

}
if ($limit == 0) echo '
<div>The feed is either empty or unavailable.</div>';
else foreach ($items as $item) :
?>

<div>
	<a href="<?php echo
item->get_permalink(); ?>"
	  title="<?php
echo $item->get_date('j F Y @ g:i a'); ?>">
		<?php
 echo $item->get_title(); ?>
	</a>
</div>
<div>
	<?php echo
substr($item->get_description(),
 0, 200); ?>
	<span>[...]</span>
</div>

<?php endforeach; ?>

Thanks to Jeff Starr from Digging into WordPress for this great tip! Have you checked out Jeff’s book by the way? It’s great! (Review here)

This post was generated by an RSS Feed from WP RecipesYou may also like to read:

• Display most recent comments with Gravatar
• How to modify lists like ‘Categories’ and ‘Blogroll’ in WordPress?
• The Right Way to Add Custom List Markers to Unordered Lists
• WordPress hack: Get popular posts by comments count
• WordPress tip : Better page navigation

WordPress tip : Fetch and display RSS feeds is a post from: Build Me A Fab Website

• Index and archive navigation: posts_nav_link()
• Index and archive navigation: previous_posts_link() and next_posts_link()
• Single-view posts navigation: previous_post_link() and next_post_link()

Without repeating ourselves, suffice it to say that previous_posts_link and next_posts_link are perfect for setting up separate links for index, category, and archive pages. Likewise, previous_post_link and next_post_link are perfect for setting up separate links for single-view post navigation.

Now that we’re on the same page, so to speak, let’s look at how these tags are typically used and how to improve and optimize their functionality..

Improving the next_posts_link and previous_posts_link (for archive views)

Here are the archive/category navigation links as provided in the default theme that is packaged with WordPress:

<div class="navigation">
	<div class="alignleft">
<?php next_posts_link('« Older Entries') ?>
</div>
	<div class="alignright">
<?php previous_posts_link('Newer Entries »') ?>
</div>
</div>

Functionally, this setup works great — the previous-post link is displayed only when there are previous posts, and likewise the next-post link is displayed only when there are newer posts. As convenient as this is, it doesn’t help us with the accompanying markup used to display the links. Any CSS styles applied to the <div>s in our example will be displayed even when the links themselves aren’t displayed. This can result in several issues, including:

• Padding and margins may prevent proper display when links are missing
• Background images used to enhance the navigational links will still be displayed
• Additional text and/or characters will still be displayed even when links absent
• Use of any markup other than <div>s may result in validation errors when left empty

And we’re not just talking about the front page and last page here — any category, tag, search, date, or author archive will also display botched navigational elements and design flaws when previous and next posts are unavailable. Your main index may always have previous posts, but what about that guest author archive, 2005 archive, and search results? Such pages are frequently one of a kind. Even worse, by defualt, your Home page will never have a page after it, which means a broken navigational element right there on the most important page of your site. Not good.

The easiest way that I have found to prevent this from happening when the “next” link is not generated is to simply test the $paged variable for a value greater than 1:

<?php if ($paged > 1) { ?>

	<div class="navigation">
	<div class="alignleft">
<?php next_posts_link('« Older Entries') ?>
</div>
	<div class="alignright">
<?php previous_posts_link('Newer Entries »') ?>
</div>
	</div>

<?php } ?>

By checking if there are more posts to display before calling the navigational code, this technique will prevent empty elements from wrinkling your home page and archive pages. Another way of doing this is shared by Eric Martin. Just place this snippet into your active theme’s functions.php file:

// return TRUE if more than one page exists
function show_posts_nav() {
	global $wp_query;
	return ($wp_query->max_num_pages > 1);
}

And then use the function to conditionally display navigational code in your archive.php and other archive-view template files:

<?php if (show_posts_nav()) : ?>

	<div class="navigation">
		<div class="alignleft">
<?php next_posts_link('« Older Entries') ?>
</div>
		<div class="alignright">
<?php previous_posts_link('Newer Entries »') ?>
</div>
	</div>

<?php endif; ?>

Not sure if there is any benefit to adding the extra code in the functions.php file, but I thought I would share that technique with you as another possible solution (hey you never know).

Also, a great way to improve the functionality and presentation of your blog is to provide some alternate navigational elements to help keep things flowing and balanced on the front pages of your site. For example, at Perishable Press, if the “next” link isn’t displayed, I provide a link to my site Archives:

<?php if ($paged > 1) { ?>

	<div class="navigation">
		<div class="alignleft">
<?php next_posts_link('« Older Entries') ?>
</div>
		<div class="alignright">
<?php previous_posts_link('Newer Entries »') <div>
	</div>

<?php } else { ?>

	<div class="navigation">
		<div class="alignleft">
<?php next_posts_link('« Older Entries') ?>
</div>
		<div class="alignright">
<a href="http://perishablepress.com/press
/archives/">Site Archives »</a>
</div>
	</div>

<?php } ?>

And of course, anything is possible here; the key is to keep things consistent, logical, and well-styled. Now let’s see how to improve navigational display for single-post views.

Improving the next_post_link and previous_post_link (for single views)

Fortunately, the situation is much improved for single-post navigation. By default, the next_post_link and previous_post_link provide parameters that enable us to avoid the “empty-element” syndrome. Let’s take a look at these parameters:

<?php next_post_link('format',

'link','in_same_cat','excluded_categories')

; ?>
<?php previous_post_link('format','link',

'in_same_cat','excluded_categories'); ?>

The format and link parameters enable us to do something like this:

<div class="navigation">

	<?php previous_post_link('
<div class="alignleft">Previous entry:
 %link</div>', '%title'); ?>
	<?php next_post_link('<div
class="alignright">Next entry: %link
</div>', '%title'); ?>

</div>

Here we have replicated the markup in our previous examples, but have done so conditionally, such that the markup will only be displayed when the corresponding link is displayed, thereby enabling us to avoid empty elements when either the previous or next post-link is not displayed. As you can see, the single-post nav tags enable us to include the surrounding (X)HTML and text within the function itself. We can do similar tricks with the actual link title. Check out our definitive guide to post navigation for more information.

Conditional navigational display for single posts

Just as we did with the archive nav tags (next_posts_link and previous_posts_link), we can implement some conditional functionality to display alternate navigational links when viewing the first and last posts in any archive view. For example, if I also wanted to provide a link to my Site Archives when the “next” and/or “previous” links were not displayed, I could do so using the following code:

<div class="navigation">

	<?php previous_post_link('<div
class="alignleft">Previous entry: %link
</div>', '%title'); ?>
	<?php if(!get_adjacent_post(false,
'', true)) {
		echo '<div class="alignleft">
<a href="http://perishablepress.com/press/archives/">
Site Archives</a></div>';
	} ?>

	<?php next_post_link('<div class="alignright">
Next entry: %link</div>', '%title'); ?>
	<?php if(!get_adjacent_post(false, '', false)) {
		echo '<div class="alignright"><a href="
http://perishablepress.com/press/archives/">Site Archives
</a></div>';
	} ?>

</div>

Here we are using the get_adjacent_post function to determine whether or not there is a post before/after the current post. This enables us to conditionally display some sort of fallback navigation in the first- and last-post case. The get_adjacent_post tag accepts the following parameters:

• $in_same_cat – specifies whether or not the adjacent post should be in the same category
• $excluded_categories – a comma-delimited list of categories for which the adjacent post should not belong
• $previous – specifies whether the previous post should be displayed

That does it for the single-post views. Let’s wrap things up with a way to consolidate and streamline the single and archive navigational methods..

Optimize your theme’s navigational code

Finally, here is a nice way to clean up your theme files and source code. The first step is to streamline production by getting more fine-grained with includes. This basically means that you can clean things up and save time/effort by moving your navigational code to its own file, named something like “navigation.php” or similar. You would then remove your nav code from your other template files and consolidate them all into that one location. You would then include navigation.php in any theme file where you want the navigation section to appear:

<?php include_once("navigation.php"); ?>

This technique makes maintaining and modifying your code a breeze. And, you can even streamline things further by using some conditional logic to display either archive or single navigation depending on the current page being viewed:

<?php if (is_single()) : ?>

	<div class="navigation">
		<?php previous_post_link('
<div class="alignleft">Previous entry: %link
div>', '%title'); ?>
		<?php next_post_link('<div
 class="alignright">Next entry: %link</div>
', '%title'); ?>
	</div>

<?php else : ?>

	<div class="navigation">
		<div class="alignleft">
<?php next_posts_link('« Older
Entries') ?></div>
		<div class="alignright">
<?php previous_posts_link('Newer
Entries »') ?></div>
	</div>

<?php endif; ?>

This is a great way of staying organized and reducing your workload during theme development and maintenance.

Wrap up

The tips and tricks in this article will help you create a consistent, logical, and design-friendly set of navigational links for your next theme design. In the process, you can also streamline production by consolidating your code into a single file and using conditional logic to deliver the appropriate code.

This post was generated by an RSS Feed from Digging Into WordPressYou may also like to read:

• WordPress tip : Better page navigation
• Next/Previous Post Navigation Outside of the WordPress Loop
• Two Ways to Limit the Number of Posts without a Plugin
• Randomized Grid of Posts
• How to modify lists like ‘Categories’ and ‘Blogroll’ in WordPress?

Optimizing WordPress Post Navigation is a post from: Build Me A Fab Website