WordPress Hacks for Members Only Website

By default, WordPress is a blogging tool. Nevertheless, you can truly customize to make it however you want. Many people use WordPress to create a members only website.

You can always use a plugin, but if you only needed a little modification, why install a plugin when you can do it with few lines of code. Here are some simple yet effective hacks for creating a member only site.

 

Content for Members Only without Plugin

If there are certain content on your site you wanted to show only to the registered member, you can do so by using the following code in your theme. Whatever goes between is_user_logged_in will be seen by only members.

<?php if ( is_user_logged_in() ) { ?>
// Content for Logged in user
<?php } else {?>
// Content for everyone else
<?php }?>

WordPress Hacks for Members Only Website

 

Show WordPress Login Form Anywhere and Customize It

If you want to include WordPress login form anywhere in your theme, you can do so by using the following function:

<?php wp_login_form(); ?>

However, it does not give you the option to customize the login form, because it just directly pulls default WordPress login form. What if you want to show something like this?

Here is code to do that. Paste the following code wherever you want the form to show up.

// WordPress Login Form
<?php if (!(current_user_can(‘level_0′))){ ?>
<h3>Member Login</h3>
<form action="<?php echo get_option(‘home’); ?>/wp-login.php" method="post">
<table width=’100%’ cellspacing="0" cellpadding="0">
<tr>
<td>
<label><?php _e( ‘Username’ ) ?></label>
<input type="text" name="log" class="input" value="<?php echo attribute_escape(stripslashes($user_login)); ?>" />
</td>
<td>
<label><?php _e( ‘Password’ ) ?></label>
<input type="password" name="pwd" class="input" value="" />
</td>
</tr>
<tr>
<td colspan="2"><?php do_action(‘login_form’); ?>
</td>
</tr>
<tr>
<td>
<a href="<?php echo site_url(‘wp-login.php?action=lostpassword’, ‘login’) ?>" title="<?php _e(‘Password Lost and Found’) ?>"><?php _e(‘Forgot Password?’) ?></a>
</td>
<td>
<input type="submit" name="submit" value="Log In" class="button" />
<input type="hidden" name="redirect_to" value="http://<?php echo $_SERVER['SERVER_NAME'] . $_SERVER['REQUEST_URI'] ?>" />
</td>
</tr>
</table>
</form>
<?php } else { ?>
<!– When User logged in Show the following info –>
<h2>Logout</h2>
<?php get_currentuserinfo();?>
Welcome Back &nbsp<?php echo($current_user->user_login . " ");?><br />
<a href="<?php echo wp_logout_url(urlencode($_SERVER['REQUEST_URI'])); ?>">Logout</a><br />
<a href="<?php echo get_admin_url(); ?>">Admin?</a><!– If you are admin goes to admin dashboard –>
<?php }?>

You can add a CSS div tag to style it. The advantage of using this login form you can almost create a mini dashboard for members by using get_currentuserinfo() function and show any information about the user.

 

Custom WordPress Menu for Members

Like content you can create custom WordPress menu for members. Let’s register the menu first. Go to your theme function file (functions.php). Use the following code to register the menus.

register_nav_menus( array(
‘primary’ => __( ‘Primary Navigation’, ‘twentyten’ ),
‘visitor’ => __( ‘Visitor Navigation’, ‘twentyten’ ),
‘footer’ => __( ‘Footer Navigation’, ‘twentyten’ ),
) );

Now, put the following code where you want your menu to show up, most probably inside the header.php file.

<?php
if ( is_user_logged_in() ) {
wp_nav_menu( array( ‘container_class’ => ‘menu-header’, ‘theme_location’ => ‘primary’ ) );
} else {
wp_nav_menu( array( ‘container_class’ => ‘menu-header’, ‘theme_location’ => ‘visitor’ ) );
};?>

Now you need to actually create the menu on WordPress backhand. The “Menus” setting should be under Appearance Tab. Create a menu with the name main and visitor. On both menus add whatever you want to show. For example: if you want a page to show up only when user logged, add it in the main menu.

You can also create a dynamic footer menu using the same method.

WordPress Custom Fields and Hacks for Bloggers

You can use WordPress to create a custom and professional looking website. In this post we are sharing some WordPress custom field tricks and hacks that will allow you to have a better WordPress powered site.

Sometimes there could be guest bloggers who only writes one post on your site and that’s all. You can use this method to show regular author information. Keep in mind the author has been registered in WordPress. Maybe, you do not want to register every time a new guest authors writes. But, how do you still get guest author information to show up in the same format as regular author? Custom Fields!

 

Guest Author Name in the Front Page and Individual Posts

The first thing we need to do is to set a WordPress if statement to get the custom field value. This way it will only show up when the custom file value is assigned. Open up your “index.php” and “single.php” and paste the following code where you want the author name to show up. It could be after date or after comments. For example after this code:

<?php the_time(‘M j, Y’) ?>
< ?php if ( get_post_meta($post->ID, 'guest_author_name', true) ) { ?>
// check to see if custom field guest author name exists
< ?php echo get_post_meta($post->ID, "guest_author_name", $single = true); ?>
< ?php } ?>\

Once we put the if statement we just call it on whichever post we want the guest author name to show up. The guest author name should show up on the front page and for specific post only.

 

Guest Author Information Block on Individual Post

Okay, so we have the name showing up in the post meta description but some information about the guest author would be nice too.

Again, first we have conditional if statement which looks for author image thumb and description. Do not forget to change the image the directory. Also, we attached a class to the block and thumb, it allows to style both image and the block using CSS.

<?php if ( get_post_meta($post->ID, ‘autho_thumb’, true) ) { ?> // checks to see if the custom field exist
<div class="writer_bio">
<img class="autho_thumb" src="http://media.webdesignviews.com/author/<?php $values = get_post_custom_values("autho_thumb"); echo $values[0]; ?>" alt="Author Thumb" width="60" width="60" height="60" /><?php } ?
<?php if ( get_post_meta($post->ID, ‘guest_author’, true) ) { ?>
<?php echo get_post_meta($post->ID, "guest_author", $single = true); ?></div>
<?php } ?>

Here is the CSS I used

.writer_bio {
color: #666;
background: #eee;
text-transform: none !important;
font-size: 13px;
font-weight: normal;
height: 75px;
width: 600px;
padding: 6px;
padding-bottom: 6px;
padding-left: 0;
margin-bottom: 10px;
}
.writer_bio img {
padding: 0 !important;
float: left !important;
margin-left: 4px !important;
margin-top: 3px !important;
border: 2px #ccc solid !important;
height: 60px;
}

You even style more with the class autho_thumb. Once that is done all you need to do is add the autho_thumb and guest_author in the field and fill out the information. You can even add HTML such as link in custom field.

So, there you have two custom fields for guest author information. This might seem like a lot of steps. Trust me once have done it, it is just a matter of adding the image and the description next time you want to do it.

 

Better Custom Field for Displaying Post Image on Front Page

This method is used to display a thumb for the post on the front. I wanted to take it a little bit further and make easy for the front end user. Also, with Jean’s method every the images would have the same alt=”post-image” and I might not be good for search engines. Moreover, you would have to include the whole URL for images every time. First here is the code:

<?php $postimageurl = get_post_meta($post->ID, ‘post-img’, true);
// variable for image
$image_alt = get_post_meta($post->ID, ‘post-img’, true);// variable for description
// check if the the custom field is called
if ($postimageurl) {
?>
<a href="<?php the_permalink(); ?>" rel="bookmark"><img src="<?php echo $postimageurl; ?>" class=
quot;post-img" alt="<?php echo $image_alt; ?>"; width="500" height="300" /></a>
<?php } else { ?>

Before I explain the code, notice that I did not add a else statement for a default thumb. Look at Jean’s post if you would like to have a default image if so image is assigned in custom field.

First we have two variables $postimageurl and $image_alt. First one is to get image location and second one is to add the image name. Then again we set a if statement to check if the custom field gets called.

<?php echo get_option(‘siteurl’).‘/wp-content/uploads/thumb/’?>

The different thing is above code that gets the image location. I have created a folder called thumb in my WordPress upload directory, so rather than typing the whole URL every time I would just type the image name, once I uploaded the image in the folder.

If you want a different directory such as let’s say you would store your images in the root of your domain just replace <?php echo get_option(‘siteurl’).‘/wp-content/uploads/thumb/ ?><?php echo $postimageurl; ?> with http://yourwebsite.com/images/<?php echo $postimageurl; ?>.

So, the code is a little tweaked so every post image would have a different alt (title) and you would type the image name extension rather than whole URL.

 

Arrange Your WordPress Navigation However You Want

The first thing to know is wordpress list pages using wp_list_pages tag, which is usually located in header.php. but you may not want to list all your pages. If you want to hide some of your pages from showing up, you would do this:

<?php wp_list_pages(‘include=7,13′ ); ?>
//or
<?php wp_list_pages(‘exclude=5,9′);? >

Exclude or include almost works the same way. Exclude will omit certain pages from WordPress page list and include only show the pages ID you specify. However, most of the web design blog or any other blogs like to use tags or categories as their navigation. In that case, you can just get rid of wp_list tag and custom code the navigation. Alternately, you can do that with your tags as well. The benefit of coding this way you can assign CSS class to style each element of the navigation.

How to find your WordPress page ID

I recently had to find a page ID for exclusion in a template that I was using and after about 10 minutes finally found an easy way to find the page ID of a WordPress ’page’.

In older versions of WordPress, I believe this was easier, but here is how you can do it now.

  1. Go into the WordPress admin panel then go to Pages.
  2. Then hover over the page that you want to know the ID of.
  3. You will see the ID in the status bar on the bottom of the browser (see below).

If you can’t see the full address try another way (further below).

  1. Go into the WordPress admin panel then go to Pages.
  2. Then you will see the ID in the address bar. It will be the number after the equal sign.
  3. Click on the page that you want to know the ID of.

 

Showing Archive Topic

Most of the WordPress themes comes with archive.php page. But, I have seen many websites where the archive pages are not very helpful and does not tell users what topic or categories they are browsing. You can add the following codes in your archive.php to avoid confusion.

<?php /* If this is a category archive */ if (is_category()) { ?>
<h3 class="pagetitle">Current Browsing Topic: &#8216;<?php single_cat_title(); ?>&#8217;</h3>
<?php /* If this is a tag archive */ } elseif( is_tag() ) { ?>
<h3 class="pagetitle">Posts Tagged &#8216;<?php single_tag_title(); ?>&#8217;</h3>

Like it? Share it.

Leave a Comment Yourself

Your email address will not be published. Required fields are marked *