How To: Prevent Images from Being to Large

Have you ever had an image show up on your website which is to large, causing problems for your WordPress theme?   This is especially common for WordPress blogs that have multiple authors, where some authors may not know how big they can make the images.

Fixing this is incredibly easy with this CSS hack!    All you need to do is take the following code and place it in your stylesheet, setting a maximum width for your images:

.postarea img {
max-width: 500px;
height: auto;
}

In the above code snippet, you’ll want to replace postarea with whatever div ID or CLASS your theme uses for the content.   You can also adjust the 500px to the maximum width you’d like for your images to be.

Note: This hack may not work on some versions of Internet Explorer.

  • Leave a Comment
  • How To: Update Your WordPress Database Name

    Last week while I was doing some spring cleaning, I decided to move a few of my sites over to a new CPanel.   The move went fairly smoothly, but once everything was moved, there was the matter of updating the WordPress database to show the new database name. If you are wanting to do something similar, here is what you need to do.

    All you need to do is update the wp-config.php file to point towards the new database name, which should be found in the root of your WordPress installation.   Open the wp-config.php file and look for the following code:

    define('DB_NAME', 'dbname');

    Where it says dbname, update the name of your database.  If your login name changed, you’ll want to update that as well.

    Once that was done, the only problem I encountered was that I was unable to upload pictures.   The fix?  Go into your WordPress dashboard and go to Settings –> Miscellaneous and update the path where images are uploaded to.

  • Leave a Comment
  • How To: Add Images to WordPress Login/Register links

    Have you ever wanted to use icons/images instead of plain text for Login/Register links on a WordPress blog? Thankfully WordPress allows a down to bone customization so you could say that almost everything is possible. Our technique is simply achieved by creating two functions and adding them to your theme’s function.php file.

    To replace Log in/Log Out text with a desired image, simply copy the code below and make your functions.php file ready for editing (through WordPress Theme Editor or FTP),

    //Image instead of text for the "Login & Log Out" links
    function ax_login() {
    $before = '<li class="axLinks">';
    $after = '</li>';
    $theme_url = get_bloginfo('template_url');
    if ( ! is_user_logged_in() )
    $link = $before . '<a href="' . wp_login_url() . '">' . '<img src="' . $theme_url . '/images/login.png" alt="Log in" />' . '</a>' . $after;
    else
    $link = $before . '<a href="' . wp_logout_url() . '">' . '<img src="' . $theme_url . '/images/logout.png" alt="Log Out" />' . '</a>' . $after;
    echo apply_filters('loginout', $link);
    }

    Paste the code you copied and then submit/save the file. Pick two icons you like (the size it’s up to you to decide but names are relative to the code, see: login.png, logout.png) and upload them to your theme images folder. Reload your WP site and ta-da!!! There you see two new shiny icons you didn’t have before. This code applies to any situation, whether you do have or not the Meta Widget active.

    What just happened?

    This function will override the output of loginout filter, it requires you to have wp_loginout(); somewhere on  your theme where you want to show your login icon. You can even style it using CSS by adding the .axLinks{ } class to your theme’s style.css file, and then manipulate it as you desire. Here’s a small CSS block which gives only basic directions.

    .axLinks li, a, img{
    background-color: transparent;
    list-style: none;
    text-decoration: none;
    border: 0; }

    The same treatment can be applied to the register filter as well, with just some small necessary changes, of course a new functions needs to be created only to avoid confusion. Below you can find the code for Register/Site Admin links. Follow the same steps as with the function above.

    //Image instead of text for the "Register & Site Admin" links
    function ax_register() {
    $before = '<li class="axLinks">';
    $after = '</li>';
    $theme_url = get_bloginfo('template_url');
    if ( ! is_user_logged_in() ) {
    if ( get_option('users_can_register') )
    $link = $before . '<a href="' . site_url('wp-login.php?action=register', 'login') . '">' . '<img src="' . $theme_url . '/images/register.png" alt="Register" />' . '</a>' . $after;
    } else {
    $link = $before . '<a href="' . admin_url() . '">' . '<img src="' .$theme_url . '/images/site_admin.png" alt="Site Admin" />' . '</a>' . $after;
    }
    echo apply_filters('register', $link);
    }

    This function will override the output of register filter, it requires you to have wp_register(); somewhere on  your theme, more precisely wherever you want your register/site admin icon. Now if you don’t have any pre-chosen icons, there are numerous choices available.

    This little modification has been tried and proven to work up to WordPress.2.7.1 and is intended to save you from editing the core, instead creating two easy-to-customize functions that can be delivered with your theme. If you encounter any potential problems feel free to ask by commenting below.

  • Leave a Comment
  • Make an Apple.com Style Breadcrumb for Your WordPress Blog

    Breadcrumbs, as has been said before on WPHacks, are very useful, both for your SEO and reader’s navigation. In other words, there is no reason why you shouldn’t have them on your site.

    There are a number of breadcrumb plugins you could use, but with a bit of WordPress code, you can avoid this. If you use sub-categories, then this will only display the name of the sub category.

    A typical breadcrumb is something like this:

    Home >> [Category] >> [Post Title]

    WordPress can very easily do this – to get the name of the category the post is in, all you need is

    <?php the_category(); ?>

    Then, to display the post title, the code you need is

    <?php the_title(); ?>

    So our final code, with some arrows added in is:

    <a href="/">Home</a> &raquo;  <?php the_category('   '); ?>   &raquo; <?php the_title(); ?>

    So now that you’ve got your breadcrumb sorted, you can take this one step further and spice it up a bit. For the next part, we’re going to be using the code from a tutorial at Janko at Warp Speed, and with this code, we’re going to turn our breadcrumb into something that looks like the ones you see on Apple.com!

    First, download the html version here, and open it in a your web editor (ie Notepad, Dreamweaver etc). Scroll down until you find <ul id=”breadcrumb”>. This is where we’re going to start editing. All you need to do is copy and paste the following code:

    <ul id="breadcrumb">
    <li><a href="/" title="Home"><img src="/images/home.png" alt="Home" class="home" /></a></li>
    <li><?php the_category(', ') ?></li>
    <li><?php the_title(); ?></li>
    </ul>

    This is basically the same code as we had above, just putting into a list. Make sure you upload the home.png file to /images/, and while you’re at it, upload the other images.

    Next thing we need to do is the CSS. Go into your style.css and paste the following:

    #breadcrumb {
    font: 11px Arial, Helvetica, sans-serif;
    height:30px;
    line-height:30px;
    color:#9b9b9b;
    border:solid 1px #cacaca;
    width:100%;
    overflow:hidden;
    margin:0px;
    padding:0px;
    }
    #breadcrumb li {
    list-style-type:none;
    float:left;
    padding-left:10px;
    }
    #breadcrumb a {
    height:30px;
    display:block;
    background-image:url('/images/bc_separator.png');
    background-repeat:no-repeat;
    background-position:right;
    padding-right: 15px;
    text-decoration: none;
    color:#000;
    }
    .home {
    border:none;
    margin: 8px 0px;
    }
    #breadcrumb a:hover {
    color:#35acc5;
    }

    Once you’ve done that, then you’re done! If you copy the code from the source file (which you should), then make sure you change the url of the images.

  • Leave a Comment
  • Fixing CSS Drop-Down Menus That Hide Behind Flash Objects

    One of the more common issues with embedding a flash object on your home page (or any page for that matter) is that if it is near the navigation and you have CSS drop-down menus, then you may find your drop-down menu getting lost behind the flash object. If you haven’t dealt with this before it can feel like a nightmare, but fortunately it’s a pretty easy fix.

    The Problem: You have a CSS based drop-down menu in your navigation and a flash element near it the menus may get “hidden” behind the flash object.

    The Solution: Set the z-index of the div holding the flash to 1 and the z-index of the div holding the nav to 2.

    In the flash element:

    Look for the flash <object> tag and add the following code:

    <param name="wmode" value="transparent">

    You’ll want to insert this code right below the <param name=”quality” value=”high”> tag and include the code wmode=”transparent” in the flash <embed> tag.

  • Leave a Comment
  • How to: Using Thumbnails in your Sidebar “Recent Post” Listing

    On the WP Recipes forum, a guy just asked me how I managed to insert thumbnails on the recent post widget located on the sidebar of my blog Cats Who Code. That’s a lot simpler than it seems.

    If you’d like to see a live demo of this tutorial, just click here.

    1) – Make sure you’re using a custom field in your posts, with the thumbnail url.

    There’s a lot of tutorials available online to add a custom field to your pots. This one is good in my opinion, so you should read it if you don’t know how to define a custom field.

    2) – Download the required plugins

    In order to customize your recent posts widget, you have to download the Recent Posts plugin by Sebastian Schmieg.

    You’ll also need to download and install the Post-Plugin Library, which contains all the php functions needed by the Recent Posts plugin.

    3) – Upload and activate the plugins

    Once you downloaded the plugin and the library, unzip the files and upload it to your wp-content/plugins directory. Then, login to your WordPress dashboard, Go to “Plugins” and activate both the library and the Recent Posts plugin.

    4) – Configure the plugin

    After having the plugin and the library uploaded and activated, you have to configure the options so you’ll be able to display the post thumbnail on your sidebar.

    To do so, login to your WordPress dashboard and navigate to “Settings”, “Recent Posts”.
    On “General”, you can tell the plugin how many posts to be displayed, if it should display posts and pages or only posts, and a lot more.

    Once you configured the “General” options to fits your needs, go to the “Output” options. In order to display your custom field thumbnail on your sidebar, you have to enter a bit of html as well as the special parameter to embed the custom field.

    Here’s the code that I entered:

    <li><img src="{custom:Image}" width="48" height="48" alt="" />{link}
    <div class="clear"></div>
    </li>

    The special parameter {custom:Image} tells the plugin to embed the Image custom field. Don’t forget to replace Image with the name of your custom field!

    5) – Add the widget to your sidebar

    Simply go to “Design”, “Widgets” and add the Recent Posts + widget to your sidebar. Visit your blog, your thumbs are showing in the sidebar along with your recent posts!

  • Leave a Comment
  • How To: Adding an External RSS Feed to Your WordPress Blog

    Have you ever wanted to add an external RSS feed to your WordPress blog?  This is a great way to promote one of your other blogs (if it is in a similar niche) on a more popular site you run.

    Most of you will probably remember that about a month ago we finally got around to launching our WordPress Forums, which has an RSS feed associated with it.   In order to cross-promote our forums on this site, I wanted to display our most recent forum posts in the sidebar here at WordPress Hacks.

    In order to accomplish this, I grabbed the following code from Jean’s post over at Smashing Magazine:

    <?php include_once(ABSPATH.WPINC.'/rss.php');
    wp_rss('http://wpforums.com/external.php?type=RSS2', 5); ?>

    It takes the rss.php file that is built into WordPress (used for widgets).  In this code it is set to display the most recent 5 posts from the RSS feed “http://wpforums.com/external.php?type=RSS2.”

    Here is how it looks:

    I have gone ahead and added this to our WordPress Code page for easy reference.

  • Leave a Comment
  • How to: Upgrade your WordPress Blog in a Minute via SSH

    Having to upgrade your WordPress install every time a new version is released is necessary, but also very boring. If you have a SSH access to your server, here’s a very quick way to upgrade your WordPress install.

    This is probably the most important step of this whole tutorial: always backup your WP Database and files. This tutorial have been tested, however I won’t be held responsible for any kind of data loss.

    Once done, you can connect to your server by using SSH. On Mac and Linux platform you can use the Terminal, on Windows I recommend using Putty.

    Get the latest WordPress version available:

    wget http://wordpress.org/latest.tar.gz

    Uncompress it:

    tar xfz latest.tar.gz

    Delete the wp-admin and wp-includes directories:

    rm -rf ./wp-includes/
    rm -rf ./wp-admin/

    Go to the wordpress directory:

    cd wordpress/

    Now, it’s time to copy the downloaded files to your existing WP install, by overwriting old files:

    cp -rpf -f * ../

    Once done, come back to the WordPress directory and remove the downloaded files:

    cd ..
    rm -rf ./wordpress/
    rm -f latest.tar.gz

    Visit your blog and upgrade the database (if needed). That’s all, your blog is now up to date and the whole process didn’t took more than a minute or two!

  • Leave a Comment
  • How To: Building a Google Custom Search Engine (GCSE) into Your WordPress Blog

    Over the holiday weekend I decided to spend some time cleaning up a few of my websites and while doing this, I ended up installing Google’s Custom Search Engine on a couple of my WordPress blogs (as of this post I haven’t done this on WP Hacks yet, but will probably end up doing so here as well).

    For people wondering how to easily install Google’s Custom Search Engine (GCSE) on their WordPress blog, here are two resources I recommend:

    • Build Your Google Custom Search Engine – The first step is to actually create your Google Custom Search Engine.   The post by Maki over at Dosh Dosh does a GREAT job of explaining how to do this.   Towards the end Maki explains how to actually integrate it into your WordPress blog, but rather than go through all those steps, you’ll want to instead check out the second step.
    • Integrate your Google Custom Search Engine into WordPress – Once you’ve built your custom search engine, head over to this post and figure out a quick and easy way to integrate it into your WordPress blog.   This method ONLY requires you to alter the searchform.php and search.php files (which most themes come with), so it is really easy.

    Why Use Google’s Custom Search Engine?

    With the current setup of the WordPress search engine, posts are displayed with the most recent post first based upon the search term.   Using Google’s Custom Search Engine, it will use Google’s search algorithm to display your posts with the most relevant post on top and you can actually integrate it into your WordPress blog, so it looks natural.   Using this also allows you to display Google AdSense ads, which can earn you money on some blogs.

    The main downside with this method is that Google has to actually index the post before it will appear in your blog’s search results, but that won’t be a problem for most blogs.  It will just add a small delay before posts appear in your search results.

  • Leave a Comment
  • How To: Display WordPress Categories without Children

    About a week ago I decided I was unhappy with the archives plugin I was using to display our archives, so I decided to build a custom archives page.   This archives page is fairly basic in that it displays the categories and archives side-by-side, then all the posts below it.   This way people can use Ctrl+F to quickly find posts they are looking for. 

    After getting the page built, I realized all of the “child” categories I use for the WordPress Hacks theme was causing some problems, so I decided to remove them from the display.   After all, these posts can also be found in their parent category. 

    If you are displaying your categories somewhere and would like to remove the children, here is the code you’ll need (for WordPress 2.5+):

    <?php wp_list_categories('title_li=&depth=1&show_count=1') ?>

    The depth=1 is the important one for the purpose of this hack as it is what tells WordPress not to display more than your parent categories.   By default, it is of course set to depth=0 (shows all categories).   If you are wondering what other options you have, here is what the WordPress Codex lists for the depth parameter:

    • 0 – All Categories and child Categories (Default).
    • -1 – All Categories displayed in flat (no indent) form (overrides hierarchical).
    • 1 – Show only top level Categories.
    • n – Value of n (some number) specifies the depth (or level) to descend in displaying Categories.
  • Leave a Comment