Image by: vizzzual-dot-com

In building CMS sites for clients, some may require that you offer certain files to be downloaded off their site. A PDF for example, or perhaps wallpapers or other media. Most browsers, correctly, will display these items inline as a new page or tab however for these purposes you need to force the browser to download the item, not display it. Here’s how it’s done.

The Code

Your .htaccess file is the key to getting this done, and here’s the code you need to add:

AddType application/octet-stream .csv
AddType application/octet-stream .xls
AddType application/octet-stream .doc
AddType application/octet-stream .avi
AddType application/octet-stream .mpg
AddType application/octet-stream .mov
AddType application/octet-stream .pdf

You can of course add as many other filetypes to this list as you may require, but you can get the principle from this example.

Image by Luc Latulippe

More and more corporate sites are using Twitter these days and so you’re more likely to have a client who requires some sort of Twitter activity to be shown in his site. Perhaps he wants his most recent tweet displayed, or a few results from a Twitter search feed.

There are a number of Twitter based widgets and plugins, but in most cases, they’re heavily styled and don’t make it very easy for you to integrate a tweet or two into a very specific area in your design. The script below let’s you do just that and so it’s my method of choice.

Here’s a great and flexible script to grab some recent tweets for your WordPress site:

<?php
$doc = new DOMDocument();

# load the RSS -- replace 'lylo' with your user of choice
if($doc->load('http://twitter.com/statuses/user_timeline/INSERT_USERNAME_HERE.rss')) {
 echo "<ul>\n";

 # number of <li> elements to display.  20 is the maximum
 $max_tweets = 10;

 $i = 1;
 foreach ($doc->getElementsByTagName('item') as $node) {
 # fetch the title from the RSS feed.
 # Note: 'pubDate' and 'link' are also useful (I use them in the sidebar of this blog)
 $tweet = $node->getElementsByTagName('title')->item(0)->nodeValue;

 # the title of each tweet starts with "username: " which I want to remove
 $tweet = substr($tweet, stripos($tweet, ':') + 1);

 # OPTIONAL: turn URLs into links
 $tweet = preg_replace('@(https?://([-\w\.]+)+(:\d+)?(/([\w/_\.]*(\?\S+)?)?)?)@',
 '<a href="$1">$1</a>', $tweet);

 # OPTIONAL: turn @replies into links
 $tweet = preg_replace("/@([0-9a-zA-Z]+)/",
 "<a href=\"http://twitter.com/$1\">@$1</a>",
 $tweet);

 echo "<li>". $tweet  . "</li>\n";

 if($i++ >= $max_tweets) break;
 }
 echo "</ul>\n";
}
?>

Remember that if your working of a busy site, it’s probably a good idea to integrate this with a caching system to avoid any problems with the Twitter API limits.

Image by PetitPlat by sk_

Your site should always be as usable as possible and site navigation is a big part of that. Aside from your standard sidebars and top navigation, it’s always a good idea to include a breadcrumb to let users track their way back to the home page. Of course there are lots of plugins you can use to insert this, but why use a plugin, when you can do it just as easily on your own.

Here’s the code that you’ll need to add to your functions.php file:

//breadcrumb function
function YLcrumbs() {
 if ((is_page() && !is_front_page()) || is_home() || is_category() || is_single()) {
 echo '<ul id="breadcrumbs">';
 echo '<li><a href="'.get_bloginfo('url').'">Home</a>&raquo;</li>';
 $post_ancestors = get_post_ancestors($post);
 if ($post_ancestors) {
 $post_ancestors = array_reverse($post_ancestors);
 foreach ($post_ancestors as $crumb)
 echo '<li><a href="'.get_permalink($crumb).'">'.get_the_title($crumb).'</a>&raquo;</li>';
 }
 if (is_category() || is_single()) {
 $category = get_the_category();
 echo '<li><a href="'.get_category_link($category[0]->cat_ID).'">'.$category[0]->cat_name.'</a>&raquo;</li>';
 }
 if (!is_category())
 echo '<li><a href="'.get_permalink().'">'.get_the_title().'</a></li>';
 echo '</ul>';
 }
}

Then, in your template, wherever you want to display your breadcrumb, you’d add the following:

<? YLcrumbs(); ?>

Note that the function generates a breadcrumb in a UL element, so your CSS might look something like this:

#breadcrumbs {padding: 10px 0;margin:0;}
#breadcrumbs li {display:inline;padding: 0 10px 0 0;}

That would give you a  list of LI elements in a row. Then you can style it up further as you require.

Have you used this somewhere? Leave a link in the comments to your implementation of this breadcrumb system.

// add google analytics to footer
function add_google_analytics() {
 echo '<script src="http://www.google-analytics.com/ga.js" type="text/javascript"></script>';
 echo '<script type="text/javascript">';
 echo 'var pageTracker = _gat._getTracker("UA-XXXXX-X");';
 echo 'pageTracker._trackPageview();';
 echo '</script>';
}
add_action('wp_footer', 'add_google_analytics');

Remember to change UA-XXXXX-X to your own analytics ID.

Enjoy!

Image by Ludwig Gatzke

Here’s a quick tip for you to change the logo in the WordPress admin area. This is handy when deploying a site for a client and you want them to feel like they’re using their own custom built CMS system.

First step is to upload the image you want to use. You can do this via FTP or using the WordPress media library. Once you have the URL to your image, open your theme’s functions.php file and add the following code:

// custom admin login logo
function custom_login_logo() {
 echo '<style type="text/css">
 h1 a { background-image: url('.get_bloginfo('template_directory').'/images/custom-login-logo.png) !important; }
 </style>';
}
add_action('login_head', 'custom_login_logo');

Change the URL to the background image to the URL of the file you uploaded and presto!

Use this method? Help share this post and tell us how you used it.

Image Courtesy Michelle Chance-Sangthon

If you’re not a fan of using a WordPress SEO plugin to manage your page title’s etc, then there’s a very good way to do this yourself by using WordPress Conditional Tags.

Essentially what you’re doing is adding an if/else statement that caters for your different template types.  Your standard title tag might look something like this:

<? bloginfo('name'); ?> | <? bloginfo('description'); ?>

This would make the title of your webpage be the title of your site, followed by a pipe “|” and then the description of your site (as entered in your WordPress settings). However the problem with this is that your other pages are then not optimized using that page or posts title. What you want to do then, is make conditional statements that give a unique title on each page. This is the code you’re going to use:

<title>
 <? if ( is_home() ) { ?><?php bloginfo('name'); ?> | <?php bloginfo('description'); ?><?php } ?>
 <? if ( is_search() ) { ?>Search Results | <?php bloginfo('name'); ?><?php } ?>
 <? if ( is_author() ) { global $wp_query; $curauth = $wp_query->get_queried_object(); ?>Author Archives | <?php echo $curauth->nickname; ?> | <?php bloginfo('name'); ?><?php } ?>
 <? if ( is_single() ) { ?><?php wp_title(''); ?> | <?php bloginfo('name'); ?><?php } ?>
 <? if ( is_page() ) { ?><?php wp_title(''); ?> | <?php bloginfo('name'); ?><?php } ?>
 <? if ( is_category() ) { ?><?php single_cat_title(); ?> | Archive | <?php bloginfo('name'); ?><?php } ?>
 <? if ( is_year() ) { ?><?php the_time('Y'); ?> | Archive | <?php bloginfo('name'); ?><?php } ?>
 <? if ( is_month() ) { ?><?php the_time('F Y'); ?> | Archive | <?php bloginfo('name'); ?><?php } ?>
 <? if ( is_day() ) { ?><?php the_time('d F Y'); ?> | Archive | <?php bloginfo('name'); ?><?php } ?>
 <? if ( is_404() ) { ?>Page not found...<?php } ?>
<? if (function_exists('is_tag')) { if (is_tag()) { ?><?php single_tag_title("", true); ?> | Tag Archive | <?php bloginfo('name'); ?><?php } } ?>
</title>

What you have now is a page title that is setup to display a unique title for each of your main WordPress templates.

Have you tried a different method? Let us know in the comments.

Image by: dcdead

I’ve just finished a project for a client who wanted an interesting feature on his site. He wanted a block of content to be turned on and off whenever he needed it. So when he wanted to promote something, he wanted to add some content and have it display until he was ready to ‘turn it off’. I came up with a unique means of doing this using custom fields. Here’s how you can achieve this:

The Content

Firstly create your page in WordPress that you’ll use as your toggle-able content page. Add your title and content and then add a custom field like active and set the value to yes.

SIDENOTE: It might be a good idea to set the slug of this page to something generic like /info/. This way, if the content has a ‘Read More’ link of sorts, the client wont have to continually change the slug each time he changes the title of this content area.

Now you’re done in the WP Admin, now you can get into your WP PHP template file where this toggle-able content will display.

The Functionality

Basically what you’re going to create, is a code snippet that will query the page ID of the page you created above, but before displaying the content of that page, it’ll check if the custom field value is set to yes. If it’s not, then no content will display, if its set to yes, then… well you can guess what’ll happen

The Code

<? if (get_post_meta(73, 'active', true) == "yes") { ?>
<? query_posts('page_id=73'); if (have_posts()) : while (have_posts()) : the_post(); ?>
	<h3><? the_title(); ?></h3>
	<? the_content(); ?>
<? endwhile; endif; wp_reset_query(); ?>
<? } ?>

And that’s that. It’s a pretty simple trick and you should be able to apply the principle to a number of circumstances.

Be sure to register for the event at www.wordcamp.co.za

The basics

You’re basically going to setup a number of if/else statements in your template where you want your header image to appear. The final statement will be an else statement so that if none of the above rules apply, it’ll degrade so that you’ll always have a header image on your page.

You’re going to create a custom field that has the name of the image that you want to use as a header image. You don’t have to add the full path to the image. Since you’re uploading your custom image in the WordPress uploader, it’ll always end up in the same folder and so the path to the image will be entered in the template.

The how-to

So firstly create your image, and upload it to your page.

Then add a custom field called “header” and put the name of the file as the value of the field.

Then open up your template where you want your image to appear and add the following PHP – tailored to work as you need it to…

<? if (get_post_meta($post->ID, 'header', true)) { ?>
	<img src="<? bloginfo('url'); ?>/wp-content/uploads/<? echo get_post_meta($post->ID, 'header', true) ?>" alt="<? bloginfo('name'); ?>" />
<? } else { ?>
	<img src="<? bloginfo('template_directory'); ?>/images/header.jpg" />
<? } ?>

So what you’ve now done, is tell the template to check if the custom field “header” has a value. If it does, then use that value to display your image. However, if the custom field is empty, then it’ll degrade to the second default image that you specify.

And presto: you can now use your WP admin to control header images on each page. This is also a good way to do it because now your client can update/add his header images on his own without having to bug you.

Firstly, I logged into PHPMyAdmin and browsed the users table. I edited the entry for my ‘admin‘ account and found the ‘user_pass‘ field.

This field will by default have an encrypted version of your password, something like $P$BERsVRczS226JkUY29j72YuVSzm3yP/ .

Instead of trying to decrypt this, I just generated a new MD5 password and pasted the encrypted version in this field.

I encrypted a new password using the iWebTool website. Type in the password you’d like to have, and then click ‘Encrypt’. That then generates your MD5 password. For example I typed in ‘wpguru‘ as my password and that generated ‘f1c061320553d089aa807e975e2a936f‘.

All you need to do then is paste that encrytped password into the WP database field and presto, your lost password problem is fixed.