5 QUICK AND EASY TRICKS TO IMPROVE YOUR WORDPRESS THEME

There are a few behaviors I normally change when I’m writing a WordPress theme. Some of them are pretty basic, but they can really enhance the theme my making it go that extra mile.

CUSTOMIZE THE LOGIN PAGE

Even though you can’t include a custom login page in your theme, it’s actually quiet easy to customize the existing one. If it’s just changing the logo or giving it a completely different layout, the place to start is the login_enqueue_scripts action. Here you can decide to output a simple piece of CSS or a link to a full CSS file. You can also queue up any JavaScript you might want to use.

function theme_customize_login() { 
?>
    <link rel="stylesheet" href="<?php echo get_bloginfo( 'stylesheet_directory' ) . '/login.css'; ?>" type="text/css" media="all" />
<?php 
}
add_action( 'login_enqueue_scripts', 'theme_customize_login' );

You’ll need to be careful to make sure you use very specific selectors to make sure you override the base style. The basic class selectors you can use are:

body.login {}
body.login div#login {}
body.login div#login h1 {}
body.login div#login h1 a {}
body.login div#login form#loginform {}
body.login div#login form#loginform p {}
body.login div#login form#loginform p label {}
body.login div#login form#loginform input {}
body.login div#login form#loginform input#user_login {}
body.login div#login form#loginform input#user_pass {}
body.login div#login form#loginform p.forgetmenot {}
body.login div#login form#loginform p.forgetmenot input#rememberme {}
body.login div#login form#loginform p.submit {}
body.login div#login form#loginform p.submit input#wp-submit {}
body.login div#login p#nav {}
body.login div#login p#nav a {}
body.login div#login p#backtoblog {}
body.login div#login p#backtoblog a {}

The WordPress codex has quiet a decent page that goes more in depth, but this will get you started.

One thing to note is that the !important flag is required for the ‘p#nav a’ and ‘p#backtoblog a’ selectors. This is because WordPress themselves saw fit to use it. You can see the CSS I used for the sample login page here:

body.login { background-color: #d9e5ca; color: #324c0d; }
body.login div#login h1 a { background-image: url('images/logo.png'); }
body.login div#login form#loginform p.submit input#wp-submit {
    background-color: #324c0d;
    background-image: linear-gradient(to bottom, #d9e5ca, #324c0d);
    border-bottom-color: #a3d39c;
    border-left-color: #324c0d;
    border-right-color: #324c0d;
    border-top-color: #324c0d;
    box-shadow: inset 0px 1px 0px rgba(198, 230, 120, 0.506);
}

ADDING THE POST TITLE TO THE BLOG TITLE

I’ve seen a few SEO plug-ins that do this, and I can’t honestly think why this isn’t the default WordPress behavior. This time we’re overriding the ‘wp_title’ default behavior. By default we only want this on an actual post. When that condition is true, we simply grab the current post title and in this case prep-end it to the blog title. By prending it we make sure that it’s the first thing visible in the browsers title.

function theme_add_post_title_to_blog_title($title, $sep) {
    if( is_single() ) {
        global $post;
        $title = $post->post_title . ' | ' . get_bloginfo( 'name' );
    }
    return $title;
}

add_filter('wp_title', 'theme_add_post_title_to_blog_title', 10, 2);

MAKING SURE REWRITE RULES ARE UP-TO-DATE

This is something that used to continuously catch me off guard when working with custom post types. If the rewrite rules aren’t up-to-date when you update your theme, it’s possible for them to not render. There isn’t anything that tells you that this is the problem, and the manual way of fixing it is to go into Admin > Permalinks and clicking ‘Save Changes’. We can automate this by the after_switch_theme action and then calling flush_rewrite_rules

function theme_flush_rewrite() {
    flush_rewrite_rules();
}
add_action( 'after_switch_theme', 'theme_flush_rewrite' );

REDIRECTING A SEARCH WHEN THERE IS ONLY ONE RESULT

This one is a bit of a pet peeve, but it’s not for everyone. I’ve always thought that if there is only one result from a search, well that’s probably the one I’m looking for so just show it to me! Using the template_redirect action we can do just that. All we need to do is confirm that this is a search and that the global query has only one result.

function theme_show_on_match() {  
    if (is_search()) {  
        global $wp_query;  
        if ($wp_query->post_count == 1) {  
            wp_redirect( get_permalink( $wp_query->posts['0']->ID ) );  
        }  
    }  
}
add_action('template_redirect', 'theme_show_on_match');  

CUSTOMIZING SEARCH TO ONLY CHECK POST TITLES

This is an attempt at reducing the amount of noise in the search. By default it searches both the post title and the content, this means unless you provide very specific words you can get back a lot of meaningless results. By overriding the posts_search filter you can provide an alternate SQL query for the search. This isn’t actually documented, so it is something you may have to spend time maintaining if WordPress makes a change in a future release.

To do this, we actually grab the part of the get_posts method in query.php. We then use it to overwrite the default search SQL and ignore the post content.

function theme_title_only_search( $search, &$wp_query ) {  
    global $wpdb;
    
    if ( empty($search) )  
        return $search; // skip processing - no search term in query  
    
    $search = '';
    
    $q = $wp_query->query_vars;
    
    // Fill again in case pre_get_posts unset some vars.
    $q = $wp_query->fill_query_vars($q);
    
    if ( isset($q) && !empty($q['s']) ) {
        // added slashes screw with quote grouping when done early, so done later
        $q['s'] = stripslashes($q['s']);
        if ( empty( $_GET['s'] ) && $wp_query->is_main_query() )
            $q['s'] = urldecode($q['s']);
        if ( !empty($q['sentence']) ) {
            $q['search_terms'] = array($q['s']);
        } else {
            preg_match_all('/".*?("|$)|((?<=[\r\n\t ",+])|^)[^\r\n\t ",+]+/', $q['s'], $matches);
            $q['search_terms'] = array_map('_search_terms_tidy', $matches[0]);
        }
        $n = !empty($q['exact']) ? '' : '%';
        $searchand = '';
        foreach( (array) $q['search_terms'] as $term ) {
            $term = esc_sql( like_escape( $term ) );
            $search .= "{$searchand}($wpdb->posts.post_title LIKE '{$n}{$term}{$n}')";
            $searchand = ' AND ';
        }

        if ( !empty($search) ) {
            $search = " AND ({$search}) ";
            if ( !is_user_logged_in() )
                $search .= " AND ($wpdb->posts.post_password = '') ";
        }
    }
    return $search;
}  
add_filter( 'posts_search', 'custom_search', 10, 2 );

You could of course customize this further and make it an option to include/exclude post content. This could be a global theme setting using get_option and set_option or you could add a radio or check box to your own search form and check for the existence of the parameter in the query string. It might be an idea to also include meta tables like wp_postmeta

IN SUMMARY

With these small changes you can really give your theme that extra edge that makes it feel that little more polished and a more complete user experience.