Jason G. Designs

• Last and fourth is a log in and log out link, so blog owners can edit their site on the fly. Using the function reference page Function Reference/wp login url, we will specify a log in that redirects to the same page:

• <?php wp_get_archives(); ?>
  </ul>
  </li>
  <li class="log-in-out"><h2 class="widget-title">My Account</h2>
  <ul>
  <li>
  <a href="<?php echo wp_login_url( get_permalink() ); ?>" title="Login">Login</a>
  </li>
  </ul>
  </li>

…And we provide the logout link just below the login link:

• <li class="log-in-out"><h2 class="widget-title">My Account</h2>
  <ul>
  <li>
  <a href="<?php echo wp_login_url( get_permalink() ); ?>" title="Login">Login</a>
  </li>
  <li>
  <a href="<?php echo wp_logout_url( get_permalink() ); ?>" title="Logout">Logout</a>
  </li>
  </ul>
  </li>

• Continuing, if you actually used the login link it logs in and does nothing! You can’t edit any pages or anything. So now, we need to check if the user is logged in to display a message and link to the admin panel:

• <li class="log-in-out"><h2 class="widget-title">My Account</h2>
  <ul>
  <?php if(is_user_logged_in()){
  echo "<li><span class=\"login-message\">Welcome registered user:</span></li>"; wp_register('<li>',' (Edit Site)</li>');} ?>
  <li>
  <a href="<?php echo wp_login_url( get_permalink() ); ?>" title="Login">Login</a>

We added a class to our Welcome message so we can style it later. You may have noticed the two backslashes before the quotes around our class name. These are escape slashes. If these were not there, the PHP parser would interpret the second quote after the echo statement as closing the statement.

• Now, we will add the search box to the upper right sidebar-2 div. Scroll up to the top of our code and look for <div id="sidebar-2">. In this case, I went to the Function Reference/get search form page and used the first example (what you get with the standard code) and modified it to look like our searchform. Copy and Paste what is below:

• <div id="sidebar-2">
  <form method="get" id="searchform" action="<?php bloginfo('url') ?>" >
  <div><label class="screen-reader-text" for="s"></label>
  <input type="text" value="Enter Your Query" name="s" id="s" onfocus="if (this.value == 'Enter Your Query') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Enter Your Query';}" />
  </div>
  </form>
  </div>

The added bit of Javascript beginning with onfocus is thanks to the article Getting Text in your WordPress Search Box by C. Bavota. This script makes the title disappear when a visitor clicks in the box, then reappear when the visitor clicks outside of the box.

• Next, we are going to place our icon from the earlier tutorial in this series next to the Search form and place it in a Submit button. If you recall, we placed an image of a magnifying glass in our theme’s images directory. We will now place that on the website. Type or copy and paste what is in bold:

• <input type="text" value="Enter Your Query" name="s" id="s" onfocus="if (this.value == 'Enter Your Query') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Enter Your Query';}" />
  <input type="image" name="s" src="<?php bloginfo('template_directory'); ?>/images/mag_glass.gif" />
  </div>
  </form>

<?php bloginfo('template_directory'); ?> displays in our url the location of the template’s directory and then we specify the image’s location relative to there.

Tags for this post: Blue Green Blast, Firefox, Internet Explorer 7, Themes, WordPress

Page: 1 2 3 4 5 6 7