WordPress Coding Tips to Set your Website Apart

This WordPress tutorial is for coders and developers looking for ways to set their WordPress blog or website apart from the everyday blog. I will demonstrate how to code and integrate several code snippets into your WordPress website or blog to enhance either the look, functionality or security of your website.

Prerequisites

In order to follow along in this tutorial, it is expected that you know the basics of PHP, HTML and CSS minimally. It is also good to have a working knowledge of the WordPress infrastructure. It is an advanced tutorial and will involve modifying existing WordPress PHP files. There will also be modifications to HTML, CSS and to the .htaccess file.

Code to Change Login Page Header

Are you tired of seeing the same old image header each time you log into your WordPress site? If you have a site with multiple logins where even site visitor’s login, then this is especially essential to brand your site so it looks more professional. Add the following code to your theme’s functions.php file to change your login page header image.

01 02 03 04 05 06 07 08 09 10 11 12

</p> <pre><?php //Change login page header function custom_login_logo() { echo '<style type="text/css"> h1 a { background-image:url('.get_bloginfo('template_directory').'/images/your_logo.jpg) !important; } </style>'; } add_action('login_head', 'custom_login_logo'); ?>

Simply change “your_logo.jpg” to the image name of the logo you selected for your login page and upload it to your images directory after inserting the above code into functions.php. Go to login to your site and see the change.

Add new Widget Area

In this exercise, I will demonstrate how to add a new widget area to your current WordPress theme. With the user of widgets on the rise and the increasing use of dynamic side bars, this is a must for any WordPress expert. When I say add a widget area, I mean an area where you can drop widgets into from the WordPress admin, just to be clear. Here is how to add a new widget area to your theme:

1. Register a new side bar – this can be accomplished by adding the following code to your theme’s functions.php file:

01 02 03 04 05 06 07 08 09 10 11

if ( function_exists('register_sidebar') ) { register_sidebar(array( 'name' => 'Tag Dropdown', 'id' => 'tag-dropdown', 'description' => 'tag cloud dropdown', 'before_widget' => '<li id="%1$s">', 'after_widget' => '</li>', 'before_title' => '<h2>', 'after_title' => '</h2>', )); }

2. Include the new sidebar in the theme – Here is where you choose where you want the sidebar to be on your WordPress site. Your options include index.php, single.php, page.php etc.
Add the following code everywhere you want the new sidebar to appear:

<div id="custom-sidebar"> <ul> <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('custom-sidebar') ) : endif; ?> </ul> <div style="clear:both"></div> </div>

3. Add style – the next step is to include the styles for the widget area in your theme’s style.css file. If you used the above code, you should include CSS declarations for the custom-sidebar div and the HTML elements within it. I will not provide an example for this because everyone will want to style their widget area differently according to theme you are using.

4. Activate the new side bar – Activate the sidebar by adding widgets to it. When you go to your WordPress dashboard after making the above updates, you should see a new sidebar area as in the screenshot I took below:

That is what it looked like after I dragged and dropped the Archives widget into it. Now you have an area to put new widgets in your site. Have fun with this technique. It gives you complete freedom to add widgets anywhere you desire on your WordPress blog or website.

Securing the WordPress Admin

There is one easy way to lock down your WordPress admin so that only you can access it from your usual IP address. Most of the time your IP address should stay the same, but if it doesn’t, you can use a service such as no-ip.com or others to make it static. Of course, you only want to deploy this method if you are the only one that makes changes to your site or you have only a few who do. If you have more than one admin, you can add multiple rules to account for each accordingly.

To lock down your admin area in WordPress, add the following to your .htaccess file and make sure it is outside of the section commented out for WordPress use or it will be overwritten:

AuthUserFile /dev/null
AuthGroupFile /dev/null
AuthName “Example Access Control”
AuthType Basic

order deny,allow
deny from all
allow from xx.xx.xx.xx

Change xx.xx.xx.xx to your IP address and you are good as gold.

Summary

After following along with this advanced WordPress coding tutorial, you should have learned to change the image on your WordPress login page, add a new widget or sidebar area to your site and lock down your WordPress admin so only you can access it. Have fun with the exercises in this tutorial. Happy coding!