Codeable info

Stylize Your Blog With A Cool Drop-down Menu Bar

Posted on by in WordPress Tutorials

Most elements of a webpage or WordPress site are static, which makes for a very boring and simplistic experience. I mean sure, some sites would never benefit from a stylish and complicated moving or animated element. But that doesn’t change the fact that such site additions are pretty cool, and in many cases look pretty darn professional.

In a lot of WordPress themes, the “Login” option sticks out like a sore thumb, randomly placed in various locations on the blog page.

What if there was a way to remove the “login” link and add it into your header within a sliding/drop-down menu bar? It would clean up your WordPress theme a bit, while also adding in a professional looking menu bar that can be completely customized.

In a menu bar such as the one mentioned above users and admins (after logging in of course) would also have quick access and shortcut options to standard site functions. These shortcuts include, but are not limited to, editing previously published posts, starting a new post, and editing and approving comments.

In order to add in such a menu two main WordPress source files need to be edited; “header.php”, and “style.css”. For reference we will be adding standard javascript, html and css commands.

Both files can be found under the “wp-content/themes/” directory in the folder of your currently selected theme. They can be altered through the WordPress app using the file editor listed under the “appearance” tab, or by altering the individual files on the host server. It is highly recommended you back up the related files in case something goes wrong during the process.

Step One

To begin, we need to open up the “header.php” file and find the following line which indicates the conclusion of the header:


After you have found the following line, you must paste this code directly before or above it:

<script type="text/javascript" src="//"></script>
&;script type="text/javascript">

The code we just added, will display the drop-down menu where we want it (page header, near the top). More advanced users are free to change the position of the menu bar by adding the code segment above into the footer if they would prefer the bar displays on the bottom of the page.

Step Two

The next bit of code we want to paste will be added directly after the body of the “header.php” file begins. In other words, look for the following line of code:

<div id="slide-panel"><!--DROP-DOWN MENU STARTS-->
<?php if ( ! is_user_logged_in() ){ ?>
<h2>Sign In</h2>
<form action="<?php echo get_option('home'); ?>/wp-login.php" method="post">
<label for="log">Username : </label><input type="text" name="log" id="log" value="<?php echo wp_specialchars(stripslashes($user_login), 1) ?>" size="20" />&nbsp;&nbsp;&nbsp;&nbsp;
<label for="pwd">Password : </label><input type="password" name="pwd" id="pwd" size="20" />
<input type="submit" name="submit" value="Login" />
<label for="rememberme"><input name="rememberme" id="rememberme" type="checkbox" checked="checked" value="forever" /> Remember me</label><input type="hidden" name="redirect_to" value="<?php echo $_SERVER['REQUEST_URI']; ?>" />
<a href="<?php echo get_option('home'); ?>/wp-register.php">Register</a> |
<a href="<?php echo get_option('home'); ?>/wp-login.php?action=lostpassword">Recover password</a>
</div><!--SIGN IN FORM ENDS-->
<?php } else { ?>
<h2>Control Panel</h2><ul>
<li><a href="<?php echo get_option('home'); ?>/wp-admin/">Dashboard</a></li> |
<li><a href="<?php echo get_option('home'); ?>/wp-admin/post-new.php">Write new Post</a></li> |
<li><a href="<?php echo get_option('home'); ?>/wp-admin/page-new.php">Write new Page</a></li> |
<li><a href="<?php echo wp_logout_url( get_bloginfo('url') ); ?>" title="Sign Out">Logout</a></li></ul>
</div><!--SIGN IN FORM ENDS-->
<?php }?>
</div><!--DROP-DOWN MENU ENDS-->
<div><a href="#"><?php if ( ! is_user_logged_in() ){ ?>Sign In<?php } else { ?>Sign Out<?php }?></a></div><!--LOGIN BUTTON TEXT-->

The second bit of code we added into our “header.php” file adjusts both the function and purpose of our drop-down menu. It also decides what labels are displayed once the menu has been selected. To completely customize the components within the menu, users may add in labels or functions, or even change labels depending on personal preference.

For instance, if a user wanted to change the “Username” label so that it displayed “Login” instead they would need to change the following line of code (within the code we just added):

<label for="log">Username : </label>

To change the “Username” label to the aforementioned “Login” label the user would input the following line in place of the code above:

<label for="log">Login : </label>

Step Three

After you have added both lines above into the “header.php” file you must save it to finalize the changes. Once saved, you may then close the “header.php” file and switch over to the “style.css” file, it is the final form we will be editing.

This next bit of code will decide how the drop-down bar is displayed and what it looks like. More advanced users are free to customize the colors, font styles and even size of the menu as they see fit.

There is no specific location this segment needs to be pasted, just make sure it is added to the “style.css” file and is spaced accordingly from alternate code segments. A general recommendation is to paste the following code at the very top, or very bottom of the css sheet so that it can easily be identified at a later time.

* {margin:0; padding:0; outline:0;}
#slide-panel{ background-color:#000;border-bottom-style:solid;border-bottom-width:2px;display:none;height:100px;margin:auto;}
.slide {width:950px; margin:auto;}
.btn-slide:link, .btn-slide:visited{color:#fff; float:right; display:block;font-size:14px; text-transform:uppercase; font-weight:bold;height:26px; padding:3px 0 3px 0;line-height:22px;text-align:center;text-decoration:none;width:100px; background-color:#000; font-family:Arial;}
.loginform {width:950px; margin:auto; color:#999; font-family:Arial, Helvetica, sans-serif;}
.formdetails {color:#FFF; font-size:12px;padding:5px;}
.formdetails input{border:none; padding:2px 5px 2px 5px; background-color:#EFEFEF;}
.loginregister {color:#999; padding:5px;}
.loginregister a:link, .loginregister a:visited {color:#FFF; font-size:11px; text-decoration:underline;}
.loginform h2 {padding:10px 10px 10px 0; font-size:18px; font-weight:normal; text-transform:uppercase;}
.loginform ul li {display:inline;}
.loginform ul li a:link, .loginform ul li a:visited {color:#FFF; font-size:12px; text-decoration:underline;}
Codeable info

Comments (3)

Comment by lucky_girl says:

Great post. You seem to have a good understanding that how to create a professional drop down menu. When I entering your blog, I felt this. Come on and keep writing your blog will be more attractive. To Your Success!

Comment by Mike says:

Yes… very obvious… no?

Comment by Pippin Williamson says:

Would love to see a demo or screenshot :)

Codeable info