Conditional Code to Display Login and Logout Links
loginlogout

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.

Member Logged Out

Logged In

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, reflectingthedesigner.com. All rights reserved.

November 9th, 2011 at 6:07 pm

How bout when I want the header image just to display in the homepage?, I’ve got this website where I have a header image but I don’t want it to show in the rest of the pages, I’d like either a no-image or a smaller image.

ID ) &&
( /* $src, $width, $height */ $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'post-thumbnail' ) ) &&
$image[1] >= HEADER_IMAGE_WIDTH ) :
// Houston, we have a new header image!
echo get_the_post_thumbnail( $post->ID , array(1102,350), array('class' => 'headerimage'));
elseif ( (show_header_image) ) : ?>
<img src="" class="headerimage" width="" height="" alt="" />

This is what I’ve got so far, but I just can’t get the conditional together. I’d appreciate any help!

Thanks!

November 9th, 2011 at 8:28 pm

Ok, there are actually a few ways to go about doing this.

1. Create a new page template (see post here)
2. Create a widget space within your header, and put a new text widget or any widget in that space. Use a plugin like Widget Logic or Display Widgets to choose which page which widget appears on. (See post here.)
3. Use much simpler, cleaner conditional code. For this, you should be able to use something like the following:

<?php if(is_page('about')): ?>
	<div class="header-image-1"></div>
	<?php endif; ?>
	<?php if(is_page('contact')): ?>
	<div class="header-image-2"></div>
	<?php endif; ?>

That example obviously used the about and contact pages, but any page could be used. Again, look at the WordPress Conditional Code quick guide for references. You’d need to just add styling to those new divs within your css sheet. That’s where you’d add the height, width, background position, etc. Hope that helps.

November 9th, 2011 at 6:29 pm

I was able to show the big header by changing the conditional if is_single to if is front_page, now the big image doesn’t show, but I need the post to show a featured image, whether it’s a post or a page.

November 9th, 2011 at 8:32 pm

Do you want the featured image to show inside of the header for a particular post? That would be a whole other ballgame. The easiest thing for you to do would be to just add a widget space within the header, than you aren’t limited and can easily display different items per page, post, or category, using my 2nd suggestion in the comments above. If you create that widget space, a great plugin that allows you to show featured posts is called Smooth Slider.

Dean
February 28th, 2012 at 6:18 am

How to you make the “Logout” link redirect to your website homepage?

February 28th, 2012 at 8:30 pm

This WordPress codex should be of help.

AKAOSHI1
June 16th, 2012 at 6:53 am

WOW GUYS I love you so much, after so many research on WordPress forum couldn’t find the help i needed there, I had a faith to keep search and i end up here and the code works like a magic thank you so much.

If you can just help me with one more thing my dream will come true :)

* After user login i want to display a profile URL or Redirect them to the WP Dashboard.

* If user click on the login link I would also like to direct them to my Home Page witch it display the login form, not the WP login.

PRETTY PLEASE AND THANK YOU SO MUCH!

Coder
August 25th, 2012 at 1:53 pm

The cleaner way to do this in PHP is.

<a href="" title="Logout">Logout

<a href="" title="Login">Login | Register

also, to change the headers based upon page name, the better way is to use “case”, not a series of “if” statements. It’s faster for the server.

August 26th, 2012 at 9:35 pm

It doesn’t look like your php made it through. Would love to see the full version. Try surrounding it with < pre > and < /pre > (no spaces). Thanks!

Helena
September 13th, 2012 at 1:29 pm

Hi, I have copied the code into header file and the relevent css code to the css file but it screws up the display of the site.

Where do I place the code exactly in the header file? I have place the css code upder #header {…

Would really like to add this to my site

October 9th, 2012 at 9:11 pm

Without seeing your actual code, I can’t tell you the exact position to put it. You’ll need to play around with it until you get it looking as desired. Be sure that you don’t have any open div tags or other unclosed code. That will always mess up the display.

Mike
November 20th, 2012 at 9:03 pm

Wonderful tutorial and very nice website!
I followed this and decided to place the login/register links under the header image.
I have 2 issues I am working on…
1. css related – with absolute positioning, the login/register move to the left when i resize the page. how do i get them to stay in one place always?

2. i am using a membership program (DAP), therefore the members will be logging in/out through the membership php pages, and not wordpress. Can you let me know how I can perform that type of php that will still change the login text to logout and vice versa, outside of wp_login_url & wp_logout_url code in php?
I tried an href=”…” but now I am unable to have the text change from login to logout…
Thank you!!

November 26th, 2012 at 7:45 pm

For the first question, absolute positioning puts the item in an absolute spot related to the screen or related to the wrapper it’s inside of if. Relative positioning positions something relative to the item listed directly above it in the html. So, in other words, the navigation is always listed relative to the header. Absolute means that the margins and padding are absolutely the exact pixels or percentage away from the edges of the screen (regardless of how large) or are in the exact position listed from the edges of the wrapper that contains it.

Mike
November 27th, 2012 at 2:46 pm

Ahhh…thank you so much for the concise explanation! :)

LEAVE A COMMENT

Powered by sweetCaptcha


Anti-Spam Protection by WP-SpamFree

Reflecting the Designer by Reflecting the Designer