WordPress: Add Your Own Branding

WordPress is a great open source platform to build on and we have nothing but respect for their work, but wouldn’t it be nice to make a few modifications to the back end such as removing the WordPress logo from the log-in screen and dashboard and replace them with your own identity or even your Client’s? There are three main locations that we will be looking at in this tutorial to really make the site your own. First we will be working on the log-in screen, removing the WordPress branding and altering the link, the admin Dashboard where we will alter the smaller WordPress ghost branding and lastly we will take a look at the footer.php file to make a small change to the included links.

LOG-IN SCREEN:

Begin by looking for the wp-login.php file located in the root of your WordPress blog folder. The file is in the same location as the wp-content and wp-admin folders. Open this file and look for the following code on line 74:

<div id="login">
<h1><a href="<?php echo apply_filters('login_headerurl', 'http://wordpress.org/'); ?>" title="<?php echo apply_filters('login_headertitle', __('Powered by WordPress')); ?>">

Here we want to be sure the URL is changed and the “Powered by” statement is altered to reflect either the designer or the Client dependending on the situation. We will change the URL to our own address to be sure if the image is clicked that the Client doesn’t visit WordPress where they may be lost or confused. Then we will alter the “Powered by” text which is a title tag, meaning it appears as a tool tip when the mouse is hovering over the image. Let’s make those alterations like so:

<div id="login">
<h1><a href="<?php echo apply_filters('login_headerurl', 'http://www.doc4design.com'); ?>" title="<?php echo apply_filters('login_headertitle', __('Powered by Doc4')); ?>">

Next we want to replace the large WordPress logo on the log-in screen. Look for the file logo-login.gif located in wp-admin/images and copy it to the desktop. Open this file in a graphic editing program such as Photoshop and change the image mode from Index to RGB then add your companies logo and delete the original WordPress logo layer. The file width should stay the same but the height can be altered as needed. Retaining the original image width is important to keeping this tutorial simple. Save this file as a .gif and replace the original file in wp-admin/images. Reload the log-in screen to see the work accomplished thus far. If the image height was altered, proceed to the next step. Otherwise, we can move on to the Dashboard alterations.

If the logo-login.gif was re-sized in terms of height, we need to locate the login.css file within wp-admin/css and look for line 62 or style “h1 a”.

h1 a {
   background: url(../images/logo-login.gif) no-repeat top center;
   width: 326px;
   height: 67px;
   text-indent: -9999px;
   overflow: hidden;
   padding-bottom: 15px;
   display: block;
   }

The selector “height” can now be adjusted accordingly to fit the new log-in image height. If unsure of the image height simply reopen it in Photoshop and check the dimensions Image > Image Size.

h1 a {
   background: url(../images/logo-login.gif) no-repeat top center;
   width: 326px;
   height: 200px; /* change the height selector */
   text-indent: -9999px;
   overflow: hidden;
   padding-bottom: 15px;
   display: block;
   }

DASHBOARD:

The dashboard contains one additional WordPress logo in the top left corner next to the blog title. We have two options here either remove this ghost logo completely or replace out with our own. To remove it completely, open admin-header.php located within the wp-admin folder. Look for the following on line 104:

<img id="header-logo" src="../wp-includes/images/blank.gif" alt="" width="32" height="32" />
<h1 id="site-heading" <?php echo $title_class ?>><a href="<?php echo trailingslashit( get_bloginfo('url') ); ?>" title="<?php _e('Visit Site') ?>">
<span id="site-title"><?php echo $blog_name ?></span> <em id="site-visit-button"><?php _e('Visit Site') ?></em></a></h1>

and remove the image tag like so:

<h1 id="site-heading" <?php echo $title_class ?>><a href="<?php echo trailingslashit( get_bloginfo('url') ); ?>" title="<?php _e('Visit Site') ?>">
<span id="site-title"><?php echo $blog_name ?></span> <em id="site-visit-button"><?php _e('Visit Site') ?></em></a></h1>

The image is now hidden. The only issue remaining is that the WordPress blog title is a little too far to the right to correct this open the wp-admin.css located within the wp-admin folder and look for line 884:

#wphead h1 {
   font: normal 22px Georgia, "Times New Roman", "Bitstream Charter", Times, serif;
   padding: 10px 8px 5px;
   margin: 0;
   float: left;
   }

Change the padding from 10px 8px 5px; to 10px 8px 5px 15px. This will realign the WordPress blog title giving it a slightly nicer appearance.

#wphead h1 {
   font: normal 22px Georgia, "Times New Roman", "Bitstream Charter", Times, serif;
   padding: 10px 8px 5px 15px;
   margin: 0;
   float: left;
   }

The alternate option is to replace the WordPress ghost logo. Look for the logo-ghost.png within wp-admin/images. Open this file in Photoshop and replace it. Be sure to save the file as a .png in order for it to be seen correctly by WordPress. Finally we will re-upload the logo-ghost.png file. Reload the browser a few times to see the changes.

FOOTER:

The WordPress footer has a few lines of text we want to look at and replace to better extend the branding. We will need to open admin-footer.php located within the wp-admin folder. Look for line 19:

echo apply_filters( 'admin_footer_text', '<span id="footer-thankyou">' . __('Thank you for creating with <a href="http://wordpress.org/">WordPress</a>.').'</span> | '.__('<a href="http://codex.wordpress.org/">Documentation</a>').' | '.__('<a href="http://wordpress.org/support/forum/4">Feedback</a>') ); ?>

In the above code, we want to change the “Thank you” text as well as the URLs. It is important to be careful not to delete a parenthesis or quote mark that may be necessary for the functionality of the php function. Below we have made a few quick alterations by changing the “Thank you” text and removing the links to the WordPress Documentation and Feedback Forums.

echo apply_filters( 'admin_footer_text', '<span id="footer-thankyou">' . __('Site design by <a href="http://www.doc4design.com">Doc4</a> for <a href="http://www.myclient.com">My Client</a>').'</span> '.__().'  '.__() ); ?>