In this little tutorial we show how to add in the navigation of the TwentyEleven Theme our RSS Feed, a link with icons to our Twitter page and to our Facebook profile. Without writing a single line of PHP code. You are able to accomplish this with the WordPress Menu.

First we go in the backend to Design-> Menu and activate the CSS Classes. Therefore we click on "Screen Options" on the very top right corner. And unter "Show advanced menu properties" you check the box for "CSS Classes" and close the Screen Options.

After that we use the "Custom Links" to create the menu entries. We add the addresses to our RSS Feed, Facebook and Twitter and add them to the menu. There we assign the 3 menu entries to the CSS Classes. RSS Feed has the class rss, Twitter the class twitter and Facebook facebook. Don't forget to save.

I prepared a sprite, which you can download with a right mouse click->Save Image As… . You have to save this sprite into the folder twentyeleven/images/.

Then we open the file TwentyEleven style.css with a text editor and add at the end of the Menu block #access our additional CSS. We do not have much to add. We let our 3 list items float to the right, push the text out of view and position the graphic. Only for the hover, focus and active states, we must define a little tricky CSS rule in order to circumvent the background gradients of TwentyEleven.

#access .twitter, #access .rss, #access .facebook {
	float: right;
}
#access .twitter a, #access .rss a, #access .facebook a {
	background: transparent url(images/social-sprite.png) 0 0 no-repeat;
	padding: 0;
	text-indent: -9999px;
	width: 70px;
}
#access .rss a { background-position: 0 0; }
#access .facebook a { background-position: 0 -96px; }
#access .twitter a { background-position: 0 -48px; }
#access .rss a:hover, #access .rss a:focus, #access .rss a:active {
	background: transparent url(images/social-sprite.png) 0 -144px no-repeat;
}
#access .twitter a:hover, #access .twitter a:focus, #access .twitter a:active {
	background: transparent url(images/social-sprite.png) 0 -192px no-repeat;
}
#access .facebook a:hover, #access .facebook a:focus, #access .facebook a:active {
	background: transparent url(images/social-sprite.png) 0 -240px no-repeat;
}

This is just an example to experiment. Add your Google+ profile and expand this example with cool CSS tricks!

You can find the Plugin in Github and it would be great if you expand it, add new ideas and possibilities to it: - github.com/bueltge/WordPress-Admin-Style

In the most common scenario the user is not logged in, is allowed to comment on the article and the comments are not closed:

There are six hooks available:

• comment_form_before
• comment_form_top
• comment_form_before_fields
• comment_form_after_fields
• comment_form
• comment_form_after

You might have noticed that the hooks comment_form and comment_form_after seem to be anchored almost at the same point but depending on the user's role and discussion settings they are not always available so you should take care which hook you are using in your code.

User logged in
If you are logged in you have fewer hooks available since the name, email and URL input fields are not needed. The missing hooks are

• form_comment_before_fields
• form_comment_after fields

User is not logged and "Users must be registered and logged in to comment" activated
If your blog is configured that only registered users can comment, an unregistered user will see this comment form and additionally the hook comment_form_must_log_in_after is available. Please notice that in this case the hook comment_form is left out.

Comments closed
If the comments on the post are closed you have only one hook left (comment_form_closed) since the form is not displayed at all:

WordPress provides the jQuery library. The calling of all the necessary files and scripts will take place within the template, which takes care to output the contact form. This call we'll do with the functions of WordPress - so we make sure that the files really are loaded only once. WordPress takes care of the correct order and of the dependencies.

First we create a template, I call it contact-page.php and it must be stored in the folder of your themes. This includes calling the necessary scripts and the associated stylesheets. Basically, you only need these four calls to store in the page.php of your theme, assign a new name for the file and put a comment to get recognized by WordPress (at the beginning the file). The following describes the syntax of the example of page.php in the default theme Kubrick.

<?php
/**
 * Template Name: Contact Page
 *
 * @package WordPress
 * @subpackage Default_Theme
 */

wp_enqueue_script( 'jquery.contactable', get_bloginfo('template_directory') . '/contactable/jquery.contactable.js', array('jquery') , 3.1, true );
wp_enqueue_script( 'jquery.validate', get_bloginfo('template_directory') . '/contactable/jquery.validate.pack.js', array('jquery') , 3.1, true );
wp_enqueue_script( 'my_contactable', get_bloginfo('template_directory') . '/contactable/my_contactable.js', array('jquery') , 3.1, true );
wp_enqueue_style( 'contactable', get_bloginfo('template_directory') . '/contactable/contactable.css' );

get_header(); ?>

    <div id="content" class="narrowcolumn" role="main">

        <div class="post" id="post-<?php the_ID(); ?>">
        <h2><?php the_title(); ?></h2>

            <div class="entry">
                <?php the_content('<p class="serif">Read the rest of this page »</p>'); ?>

                <div id="mycontactform"> </div>

            </div>
        </div>

    </div>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

As you can see in the syntax, I have saved all files of the jQuery Form Plugnis in the folder contactable in the folder of the theme. Therefore, your paths may have to be adjusted. Right now it looks like this in my theme:

• default
  • contactable
    • jquery.contactable.js
    • jquery.validate.pack.jss
    • my.contactable.js
    • contactable.css
  • style.css
  • contact-page.php
  • ...

I only added the file my.contactable.js; this takes care to call the form and can be filled with parameters. Their content is as follows:

jQuery(document).ready( function($){
    $('#mycontactform').contactable({
        name: 'Name',
        email: 'E-Mail',
        message : 'Message',
        recipient: 'example@domain.com',
        subject: 'Contact Form',
        recievedMsg : 'Thanks for your message.'
    });
});

If all files are stored and are adapted to your needs, then you only need to create a page in the admin area of WordPress. Give the page a name, if you want fill it with content and select a template - in our case the Contact Page. After saving the page, you should view it in the front end and click on the small label and the form will appear and can be filled out.

Through the call with the help of WordPress functions and the right parameters, the scripts are now integrated in the footer of the site. The jQuery library will not be called, it will be added by WordPress if it is not there yet, by the dependence of the parameters for the key jquery. By using a template with all calls, all the scripts and stylesheets are only involved if the page is called by WordPress. If you want the form snippets on all sides, you can insert the call in the header.php or functions.php.

You do not want to use this feature, then either don't use that CSS, or add your own design or you can fit the JS to your own needs. The same applies for additional fields in the form, this must be adapted to the content of the files.

The presentation of these posts in the category overview should be different. Previously it was necessary to integrate the following query:

if ( is_category('microblog') ) {
	// here the output or integration of the stylesheet for category <em>Microblog</em>
}

In WordPress 2.9 it's sufficient to use the according template category-microblog.php to use this template, if you are in the category of the slug microblog. Alternatively you can still use ID, which can be changed but with the name of the slug is the identity unique and easy.

• Create Your Own WordPress Login Design
• 10 Checks to the Perfect WordPress theme

In both cases I didn't talk about how to deactivate the default WordPress layout, since I always used the example based of the WordPress stylesheet. But the stylesheet of WordPress isn't really lean and why should you load unnecessary data, which you really don't need?

With a little hook and an appropriate function I can disable to load the stylesheet of WordPress and load my own CSS - How that works can be read in both articles about adjusting theme login.

if ( basename($_SERVER['PHP_SELF']) == 'wp-login.php' )
	add_action( 'style_loader_tag', create_function( '$a', "return null;" ) );

If you put the above syntax in your functions.php, it will also be disabled if you change or deactivate your theme. So it's easy to adjust your frontend, backend and login area. As of my experience it is necessary in some business areas, even if it's only for small areas of the backend and login. But that is essential for me, if I like to have a „perfect“ Theme.

Loading the Stylesheet

I have to use a simple function, which I put in functions.php of the current theme and integrate it via hook login_head into the login-head to load the css for the login-section. This will make the custom css being referenced only by one specific theme and if I switch to a different, a different css will also be loaded.

// custom login for theme
// folder themes/theme_name/custom-login/
function fb_custom_login() {
	echo '<link rel="stylesheet" type="text/css" href="' . get_bloginfo('template_directory') . '/custom-login/custom-login.css" />';
}

add_action('login_head', 'fb_custom_login');

The stylesheet comes with the name custom-login.css and is located in /custom-login in the folder of the theme.

The Stylesheet

Like I already said, here is tiny example, which includes classes and id's of the login-section, so you can customize it very easily.

html {
background-color: #fff;
}

#login form {
padding-top: 100px;
}
#login form .submit input {
border-color: #bcb38f !important;
color: #777 !important;
}
#login form .submit input:hover {
border-color: #bcb38f !important;
color: #bcb38f !important;
}
#login h1 {
display: none;
}
.login #nav a {
color: #777 !important;
}
.login #nav a:hover {
color: #bcb38f !important;
}

#wphead img, #wphead h1 {
display: none;
}
#wphead {
height: 100px;
}
#wphead-info {
padding-top: 27px;
}

#footer {
display: none;
}
#footer_custom {
clear: both;
text-align: center;
width: 500px;
margin: auto;
height: 100px;
}
#footer_custom .docs {
padding-top: 0px;
line-height: 100%;
}
#footer_image {
border:none;
}

The example above is just one way to customize the style. As usual there are unlimited possibilities with css and the art of it. A recommendational note from me, is to use the Firebug extension, which is really helpful when customizing css live. I can't mention this enough.