ShareTweet

Conditional Code is a wonderful way to set parameters around parts of your site. Basically, it does just what the name implies. It allows you to set the conditions by which parts of your site will be displayed or interacted with. I’d recommend familiarizing yourself with the basic conditional tags from the WordPress Codex. Make sure to bookmark this page for easy reference. I use conditional code all of the time with the handy and easy to use plugin called Widget Logic. If you already use that plugin, the following information will hopefully help you to see other ways you can make use of it.

Every WordPress theme should already have some conditional code built right into it. For example, your Archive.php page is filled with it. It tells WordPress to pull certain items into a list if specific qualifications are met. For example, if you click on a tag, WordPress is told to pull all of the posts related to that tag and display them in the way that your theme is formatted to show them. That’s just one tiny example. The question is, how can you add your own conditional code into a site, and why would you want to do this? Here are just a few reasons for you to become familiar with conditional code:

• Display a header image or text differently depending upon the page, post, category, or viewer
• Display a widget on only certain posts, categories, pages, or to only specific viewers
• Display menus or menu items on only certain posts, categories, pages, or to only specific viewers

The images below show a membership site that I’ve just created for a client (using an Artisteer generated theme with the code tweaks that I show you how to do on this site). I made use of conditional code for both the login feature as well as the advertisement button in the header. Notice the differences between these two images, and make sure click on the image to view them in full scale.

I’m going to demonstrate who you can easily create the same type of login and logout text that appears or is hidden depending upon whether the current viewer is logged in or out.

1.) Let’s get started. First of all, go into your header.php file, and add your text with the links that you’d like to create. Below is an example of a simple div wrapper I created with the linked text to both login and register.

<div class="header-login">
<a href="<?php echo wp_login_url(); ?>" title="Login">Login</a> | <a href="http://www.optionmillionaires.com/subscribe/">Register</a>
</div>

Note: Make sure to see my post on how to add social icons with a hover effect for more details on adding and styling divs within your header. I did not include the code used for the search bar in this example because I’m only illustrating the conditional code aspect.

2.) The above code works fine, but the problem is that it will always say login or register even after the viewer has logged in, which may cause some confusion. Let’s add the conditional code to it so we fix that problem.

<div class="header-login">
	<?php if(is_user_logged_in()): ?>
	<a href="<?php echo wp_logout_url( get_permalink() ); ?>" title="Logout">Logout</a>
	<?php endif; ?>
	<?php if(!is_user_logged_in()): ?>
	<a href="<?php echo wp_login_url(); ?>" title="Login">Login</a> | <a href="http://www.optionmillionaires.com/subscribe/">Register</a>
	<?php endif; ?>

Notice above that we added the condition if a user is logged in they will see the word “Logout” which links to the WordPress logout permalink. Below that code which ends with

<?php endif; ?>

you’ll see that the next condition is set for people who are not logged in yet. It’s the same exact conditional code with just the addition of a little exclamation point right before “is_user_logged_in.” Adding the exclamation point before any conditional code is like adding the word “not” to the condition. Of course, the other changes are that you have both the text with links for Login and for Register.

3.) Now, go into your style.css file and style how you want your text to appear. The following is what I did for mine. Remember that I called my div class for the login “header-login” so I need to match that same class in the style.css file for the styling to appear. This code demonstrates how I added a background for the text with a shaddow and some padding. Again, this does not include the code I used for the search bar styling, to avoid confusion.

.header-login
{
  position: absolute;
  z-index: 2;
  display: block;
  padding: 15px 15px 0 15px;
  margin: 0px;
  width: 330px;
  height: 35px;
  top: 0;
  right: 0;
  background-color: #000;
  -moz-box-shadow: 0px 0px 10px #000;
  -webkit-box-shadow: 0px 0px 10px #000;
  box-shadow: 0px 0px 10px #000;
}

.header-login a,
.header-login a:link,
.header-login a:visited,
.header-login a.visited,
.header-login a:hover,
.header-login a.hovered
{
  font-size: 14px;
  text-transform: uppercase;
  text-decoration: none;
  color: #7d7d7d;
  display:inline;
}

.header-login a:hover,
.header-login a.hovered
{
  color: #006e04;
}

So, that’s all there is to it. You can now add this same type of feature to your own site, and I hope you see how many other possibilities are opened up through this. I’ll do another post to demonstrate how I used conditional code to display the two different image links pictured above dependent upon the logged in user’s membership role.

Make sure to comment if you have some other great tips on using conditional code throughout your site.

© 2011, Sarah. All rights reserved.

ShareTweet