Wordpress is my favorite blogging tool available online.  I have tried Blogger.com, wordpress.com, weebly.com and everything else you have seen out there. That’s why a few months ago I finally put a list together about the variety of blog platforms available.  There are so many out there! None of them compare to the powerful features of WordPress self-hosting (wordpress.org).

One thing that I have found though is that WordPress is kind of boring behind the scenes. Yes, it offers almost endless upgrades and plug-ins to add features like To-Do lists, Greet Boxes, Polling, and even some basics like Google Sitemaps, but with only the bare bones options in the admin panel I got a little bored! So today I am going to show you how to customize your WordPress blog’s back-end.

Custom WordPress Login

If you are like me you get bored with the same log-in screens and occasionally want to see something new.  I have the perfect plug-in for you then and some very easy to follow instructions.

This customization also works very well for blogs with multiple authors or frequent guest posters who you would like establish a stronger brand with.  A few minutes (seriously took me like 10-15 minutes) and you will have a branded login page that not only you will enjoy but anyone interested in logging into your blog.

WordPress Login Page Plug-in

Soon Blogussion will be releasing a new theme for Thesis.  Its extremely good looking, well designed, and feature rich!  We are excited about the release and cannot wait to let all of you Thesis (and future Thesis) theme users get a crack at it.  With all the designing going on here on Blogussion by Alex (redesign) I have become caught up into learning and designing too!  So a new project of mine will be released soon but here is a peek at what a custom log-in page can look like compared to the old.

Before & After

Steps to Your Own Custom Login

1.  Download the WP Plugin: BM Custom Login Plugin

A simple way to customize the login screen on your wordpress install. There are a number of advantages to using this plugin with the most important one being the plugin means the changes you make stay even when you upgrade versions of WordPress .

The plugin also inludes a psd (photoshop) template for creating your own login screens so it couldn’t be easier.  I made the login screen above in and had it installed in 10 minutes.

2.  Create the Login Image

The Login image is perhaps the most fun.  Get out your photoshop (or gimp) and start designing.  I recommend upgrading to Adobe photoshop which I did recently and man it has rocked my world!  Design is so much more fun and exciting now I have all the tools to master it.

First – go to the file you downloaded and unzip it.

Next – Upload `the entire contents of the zip file to your plugin directory ‘/wp-content/plugins/’

Then – Activate the plugin through the ‘Plugins’ menu in your WordPress Admin > Go to the “Image Templates” folder in the plugin and find the psd (photoshop) template

Next - Create a new login background using the handy template provided. Save it as ‘login-bkg-tile.jpg’

Then – Upload the new login background image to the /wp-content/plugins/bm-suctom-login/images/

Now -  Bask in the glory of your beautiful new login screen

If you keep working on the image you can even make a very custom design where the input boxes fit within your creative image!  After you have made your image let me know where I can find it by leaving a comment so that we all can bask in the glory of your creativity!

Understand customizing your admin area and login screen will not change your SEO, or increase your traffic but will lighten the mood for you and your fellow bloggers/guest posters – Happy Blogging

Now you have a custom login so every time you and your other bloggers and guest posters can see a custom login screen which is one more step to a  unique and memorable blog.

Changing WordPress Admin Colors

Now its not new if I told you that wordpress can change its colors in the admin area from gray to blue.  If this is new to you then go to “Profile” > Your Profile and adjust the settings between gray and blue themed.

If this is not enough for you and you still want to customize your wordpress admin like I did then be sure to get a spare download of the latest wordpress and get ready to make some custom gradients.

The first thing you do is go into wp-admin and then go to images.  After going to images you should see icons, gradients, and buttons.  By changing out these images (mostly .png’s) you will have a custom admin area in your blog.  You can even put your own logo in the dashboard.

As you can see the colors are custom and the buttons are too!  Currently I am working on a plugin that will allow you to make these changes more easily and without any upgrading once you change versions of WordPress.  So be aware that there is an awesome tool coming for making everything about your blog custom and your own.

The more ownership you can take in your blog the better it is and the more you will be attached to it.  Don’t go overboard but be sure that your blog is something you are very proud of! For more resources check out the recent post on plugins we use here on Blogussion and be prepared for some very cool new things coming out in the next little while!

Related posts:

1. Ultimate Social Plugin for WordPress: FV Community News

2. How to Setup a WordPress Backup System

3. How To: Wrap the post title around an image

I don’t mean to toot my own horn here, but have you seen our Archives page? It’s pretty awesome if I do so say so myself, and I received numerous emails and comments about how I made my Archives page. So today, I’m going to show you how!

I will try to make this tutorial as detailed as possible so you can create an almost exact replica of our Archives page onto your own blog.

Download this Entire Tutorial

At the end, I am going to post a file you can download that will be compatible with a regular WordPress theme, and if you use Thesis, the entire function!

Checklist

Here are some of the things you will need below to do this tutorial. Not everything is necessary, but I am writing the tutorial to match our Archives exact.

Plugins

1. Smart Archives Reloaded
2. Recent Posts Plugin
3. (Optional) Random Posts Plugin

Files Needed

4. Standard WordPress Themes: style.css, archives.php
5. Thesis Theme Users: custom.css, custom_functions.php

Setting up the Page

I always like to set up the HTML before I start styling the page, so I am going to break down everything on the page in this section and you can add whatever you want, and exclude anything you don’t want.

A. Search Box

Give the user the option to search your blog from your Archives page.

<h5>Search Blogussion</h5>
<p>Use this search form below to look for a specific posts with specific keywords in them.</p>

<form method="get" id="searchform" action="<?php bloginfo('url'); ?>/">
<input size="20" type="text" value="To search, type and hit enter" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" name="s" id="s" />
</form>

B. Display Smart Archives

Moving along, we have the smart archives section. It looks like this, right under the Search form:

This plugin automatically links to monthly archives by the year.

Adding this to your page is simple, just add the line <?php smart_archives(); ?> wherever you want it to appear.

By default, Smart Archives shows a list of your blog posts, and just the block showing the monthly archives. To just show the monthly archives, go into your Admin panel and go to Setting → Smart Archives → Format → Tick the “block” option and click “Save Changes.”

C. “Search by” Box

The box that shows “Search by Category,” “by Author” and “Random Posts” is extremely useful, and also the most informative part on this whole archives page. You can change whatever content you want to display in this box with little coding knowledge.

Here is the code to outline the box:

<div id="searchby">
 	<div id="inner">
 		<ul>
 			<li class="title">Search By Category</li>
 			<?php wp_list_categories('&title_li='); ?>
 		</ul>

 		<ul>
 			<li class="title">Search By Author</li>
 			<?php wp_list_authors('show_fullname=1&optioncount=1&'); ?>
 		</ul>

		<ul>
			 <li class="title">Random Posts</li>
			 <?php random_posts(); ?>
		 </ul>
	 </div>
 </div>

You can change whatever you would like to in there. I recommend you at least keep categories and Authors (if you have more than one author).

D. Display Latest Posts

This may or not be useful to you, it depends on what you like on your Archives page. The code below is assuming you have the highly customizable Latest Posts plugin (see checklist above).

Paste this wherever you want:

<h5>10 Latest Posts</h5>
 <?php recent_posts(); ?>

For formatting like our Latest Post options (again, assuming you used the plugin from the checklist) follow these steps. Go to your Admin Panel → Settings → Recent Posts → Output (at top of page) → and type in the follow into “Output template:”

<div class="recent">
	<h3>{link}</h3>
	<p>{date} &middot; {commentcount} Comments &middot; <a href="{url}#phighlights">Summary</a></p>
	<p>{snippet} [...]</p>
	<p><a href="{url}">Read Full Post &rarr;</a></p>
</div>

E. Tag Cloud

I think you should always have one of these things floating around (even as obnoxious looking as they are)!

<h5>An Obnoxious Looking Tag Cloud</h5>
 <?php wp_tag_cloud(); ?>

Styling the Page

Now that we have our page set up, it’s time to add the CSS to it! This will make our code display properly instead of the jumbled up mess it probably is right now!

The search box and Smart Archives do not need any custom styling. They will just inherit the styles from your own theme you are using now.

A. Style the “Search by” Box

This box has a few different things going on here, so I am going to break it down for you.

Creating the Outline

The black box surrounding the white box is just to make it look good

The outline in my opinion makes the box look pretty good. It should match any style as it is black and white. It’s a personal choice to include the outline, I think it does make it stand out a little bit. But it is very easy to remove it, so if you don’t want it then you just simply need to remove the #searchby line in your Style sheet.

Here is the CSS code to add that outline:

#searchby{background: #454343 url(images/blackGrad.gif) repeat-x; border: 1px solid #0A0A0A; border-top: 0; margin-bottom: 1.5em; overflow: hidden; padding: 1em }

#searchby #inner {background: #FFF; border: 1px solid #000; overflow: hidden }

Here is the black gradient used in the box, if you would like to use it on your blog as well:

Right Click → Save Image As

Align the Boxes into 3 Columns

Without this CSS, your boxes are probably vertically aligned, instead of next to each other (horzontally aligned). With just one line of code, you can make these columns next to each other:

#searchby ul {float: left; list-style-position: inside; margin: 0; padding: 1em; width: 28%}

You can change the width and padding however you like until it fits your theme. I use percentages because of the way this theme in particular is coded, and you might want to use a different kind of formatting like PX or EM instead. It’s up to you though.

Other Little Styles

Here are just some other things you can add to make the box look better:

#searchby li { padding-bottom: 4px }

#searchby li.title{ font-size: 18px; list-style-type: none }

The Whole Code

#searchby{background: #454343 url(images/blackGrad.gif) repeat-x; border: 1px solid #0A0A0A; border-top: 0; margin-bottom: 1.5em; overflow: hidden; padding: 1em }

#searchby ul {float: left; list-style-position: inside; margin: 0; padding: 1em; width: 28%}

#searchby li { padding-bottom: 4px }

#searchby li.title{ font-size: 18px; list-style-type: none }

#searchby #inner {background: #FFF; border: 1px solid #000; overflow: hidden }

B. Style Latest Posts

There is just a few styles here, this will give it more formatting and make it look great.

.recent { border-bottom: 1px dashed #CCC; margin-bottom: 2em }

	.recent h3 a { font-size: 22px; line-height: 20px; text-decoration: none }

	.recent .metadata { color:#888; font-size:11px; text-transform:uppercase}

Looks Pretty Good, Right?

If you have everything working, then I am sure you will be happy with the results! Post here if you have any problems, or notice any mistakes in this tutorial. You can proceed to download the source code for the tutorial below.

Download Options

Do you use Thesis? Use this link below to get the entire function to this tutorial:

Download Thesis Compatible Archives

Don’t use Thesis? Use this for other themes:

Download

Related posts:

1. How to Create an Informative “404 Error” Page

2. 4 Great Ways I Customized my Thesis Theme

3. How To: Wrap the post title around an image

Quite recently, Blogussion was upgraded to the powerful Thesis WordPress Theme. After the release, I waited on getting some feedback on the theme. Most people loved it, some people hated it.

I got a lot of emails after the upgrade with questions on how to make some of the customizations I did, and some comments too. So I decided that because I am now addicted to Thesis and want it any blog I ever make, I now want to write about it. So I figured the first thing I would write about Thesis are the customizations I made on my own theme (which is very edited).

Before you read this…

Before you read this post, there are some things I suggest you read if you have never worked with Thesis before. More specifically, regarding the hooks system Thesis uses.

I’m not going to lie, the way Thesis works coding wise will be confusing at first with the hook system it uses. But once you mess around with it, it’s the easiest thing in the world.

• Hooks for Dummies
• Thesis Hook Reference List [Recommend you Bookmark this]
• How to Customize Like a Pro with Theme Hooks
• Default Hook Usage in Thesis [Also bookmark worthy]
• Customizing Thesis with custom.css

DIYthemes Forum

After you buy Thesis, you are granted special access to a Support forum consisting of thousands of Thesis users. I could not have made my Thesis theme what it was today without reading some of the knowledge on that forum, so be sure to use the forum as your go-to place for any Thesis information.

1. Adding a cool post footer

The thing that got the biggest response about the theme was the post footer. Check out the content immediately after this article if you don’t know what I mean by “post footer”.

I am going to show you how to create the same stuff I have in my post footer, except for the Post Highlights box.

So paste this code into custom_functions.php

function post_footer() {
	if (is_single())
	{
	?>
	<div class="postauthor">
		<?php echo get_avatar( get_the_author_id() , 100 ); ?>
		<h4>Article by <a href="<?php the_author_url(); ?>">
		<?php the_author_firstname(); ?> <?php the_author_lastname(); ?></a></h4>
		<p><?php the_author_description(); ?></p>
		<p class="hlight"><?php the_author_firstname(); ?> has written <span><?php the_author_posts(); ?></span> awesome articles for us.</p>
	</div>

	<div id="similar">
		<h3>You May Also Be Interested In...</h3>
		<p>Similar Posts Code Here</p>
	</div>

	<div id="rightcol">
		<div id="subscribe">
			<h3>Subscribe Now</h3>
			<p>If you enjoyed this post, you will definitely enjoy our others. Subscribe to the feed to get instantly updated for those awesome posts soon to come.</p>
			<ul>
				<li><a href="FEED_URL_HERE">Subscribe to our RSS Feed</a></li>
				<li><a href="FEED_URL_HERE">Subscribe for Email Updates</a></li>
			</ul>
		</div>

		<div id="custom">
			<p>Put whatever you want here!</p>
		</div>
	</div>
	<?php
	}
}
	add_action('thesis_hook_after_post_box', 'post_footer');

Here is the CSS too, if you want to build off of my style. Paste this in custom.css:

/* AUTHOR BOX */
.custom #comments { clear: both; }
.postauthor { background: #F5F5F5; border-top: 1px solid #e1e1e0; border-bottom: 1px solid #e1e1e0; overflow: hidden; padding: 1.5em; }
.postauthor img { border: 5px solid #e2dede; float: left; margin-right: 1.5em; }
.postauthor h4 { color: #666; font-size: 2em; margin-bottom: 5px; }
.postauthor p { color: #515151; font-size: 13px; margin-bottom: 12px; }
.postauthor p.hlight { font-size: 11px; text-transform: uppercase; }
.postauthor p.hlight span { color: #CB3131; font-size: 13px; font-style: italic; font-weight: bold; letter-spacing: 0.8px; }
/* BOXES */
#similar h3, #rightcol h3 { font-size: 1.8em; letter-spacing: normal; padding-top: 15px; }
#similar { float: left; width: 50%; }
#similar p { margin-bottom: 15px; padding: 10px 2.5em 10px 10px; }
#similar a { font-size: 1.4em; border-bottom: 1px solid #CB3131; line-height: 1.5em; }
#similar a:hover { border: 0; }
#similar h3 { padding-left: 10px; }
#similar span.date { color: #888; letter-spacing: 1px; text-transform: uppercase; }
#rightcol { float: right; width: 50%; }
#rightcol p { font-size: 14px; line-height: 1.5em; padding: 10px 2.5em 10px 0;  }
#rightcol h3 { padding: 0; }
#rightcol ul { list-style-position: inside;  list-style-type: square; margin-left: 1em; }
#rightcol ul a { border-bottom: 1px solid #CB3131; font-size: 14px; }
#rightcol ul a:hover { border: 0; }
#rightcol li { margin-bottom: 10px; }
#subscribe { background: #FFFBCC; border: 1px solid #E6DB55; float: right; margin: 15px 15px 0 15px; padding: 19px 10px; -moz-border-radius: 5px; -webkit-border-radius: 5px; }
#custom { background: #E4F2FD; border: 1px solid #C6D9E9; float: right; margin: 15px; padding: 19px 10px; -moz-border-radius: 5px; -webkit-border-radius: 5px; }

2. Custom Pages

If you want to edit the Thesis 404 page or Archives page like I have, check out the codes I used:

Archives Page

The default Archives page that comes with Thesis is great, but I want to do more with mine (still under construction by the way). Here is the code you can use to edit the Archives template from custom_functions.php

function new_archives() { ?>
	<p>New Archives Page</p>
<?php }

remove_action('thesis_hook_archives_template', 'thesis_archives_template');
add_action('thesis_hook_archives_template', 'new_archives');

404 Page

I got the following code from Rae Hoffman (Suggarrae).

function custom_thesis_404_title() {
?>
YOUR 404 PAGE HEADING HERE
<?
}

remove_action(’thesis_hook_404_title’, ’thesis_404_title’);
add_action(’thesis_hook_404_title’, ’custom_thesis_404_title’);

function custom_thesis_404_content() {
?>
<p>WHATEVER YOU WANT YOUR 404 PAGE TO SAY HERE</p>
<?
}

remove_action(’thesis_hook_404_content’, ’thesis_404_content’);
add_action(’thesis_hook_404_content’, ’custom_thesis_404_content’);

3. Add Custom Info to Featured Post

On the front page of the blog, there is one featured post followed by 14 teasers. I was able to add content to the bottom (such as the ShareThis button and Tweet This) of the featured post only, and this is how i did it:

function featuredpost_content() {
	if (is_home())
	{
	?>
		<p>Add whatever here</p>
<?php }
}
	add_action('thesis_hook_after_post', 'featuredpost_content');

This may or not be useful if you don’t use featured posts on your Thesis blog.

4. Add Thumbnails to “Popular Posts”, “Similar Posts”, “Recent Comments”, etc.

Note: You will need to use any plugin from Rob Marsh to be able to do this.

I used Custom Fields for this. if you don’t know how to use custom fields, read this article at the WordPress Codex.

If you use the teasers Thesis has on your blog and have 66×66 images then most of the work will already be done for you. If not, create a custom field and paste your image URL’s into it.

So if you use Rob Marsh’s “Popular Posts” plugin for example, go to Settings → Popular Posts → Output and paste this code into the very first input box “Output Template”:

<p>
<img src="{custom:thesis_thumb}" width="50" height="50" alt="" />{link}
<div class="clear"></div>
</p>

You may also need to add this to your CSS, unless you already have it. You need a clear in the code, or the output won’t look right.

.clear { clear: both }

And to add that to the sidebar, you could either copy and paste it into your Widgets panel, or if you chose not to use Widgets you can use this code to do it:

function PopPosts() { ?>
	<?php popular_posts(); ?>
<?php }
	add_action('SEE BELOW OPTIONS', 'PopPosts');

Since Thesis has a variety of sidebar hooks, you can choose one of the below to replace with “SEE BELOW OPTIONS” above:

• thesis_hook_before_sidebar_1
• thesis_hook_after_sidebar_1
• thesis_hook_before_sidebar_2
• thesis_hook_after_sidebar_2

So Thesis really isn’t hard at all to mess around with, you just need to give it a little time for you to fully understand it. Hopefully by seeing the customizations I shared with you will make you realize that. And if you are looking for a great Premium Theme, I am telling you that you cannot go wrong with buying Thesis.

Related posts:

1. Mapping out a new blog: Choosing a great theme and some killer plugins

2. How To: Wrap the post title around an image

3. Blogussion Gets a Thesis Makeover