Wanna let guest authors publish articles straight on your wordpress site? Do it with style!

This wordpress tutorial shows how to get it working front to back, from editing user roles to the slick jquery form for wordpress. I just finished pulling this off on one of my other sites, so naturally, a wordpress tutorial ensues…

First, I want to set up author accounts manually in admin, then allow access with a form for wordpress in the header of the site. Placing a login form in the header is not only functional, it also calls out that Im accepting guest posts in a stylish manner. After a lot of picking and prodding, none of the other wordpress tutorials floating around really worked, or explained how to set the user roles…

Where theres a will, theres a way. Here’s mine.

Form for WordPress jQuery Author Login
See this jQuery slide panel live in action on CreditExaminer.org

As always in the development world, there are two pieces to the puzzle. The front end and the back.

  1. In the front, we have the login form for wordpress. I’ll show you how to plug a slide panel into your theme files using the super cool jquery SlideToggle. It hides at the top of the page and pulls down when the tab/trigger is clicked.
  2. In the back, logged in authors land in their administration dashboard. We need to grant access to publish a page, a post and edit their profile, plus hide a few things from their dashboard.

Setting Up the Author Role

WordPress already has an author role, but its far from ideal. It doesnt allow authors to publish pages (which im using on my site for articles). The authors admin area also displays all kinds of site info that’ll just get in their way, such as every post, every page, comments plus some plugins show up there too. Real messy, so I want to hide this from their admin.

Three plugins make this all happen.

User Role Editor
Allows you to change default role capabilities. Authors are allowed to write and edit posts, but not pages. So lets give them that capability. Under Users -> Role Editor, scroll down to Author. Click ‘human readable’ so you know what youre letting your authors do. I set the following.

Wordpress Tutorial - User Role Editor Plugin Settings
? Back to TOC ?

I Used: Delete Pages, Delete posts, delete published pages and posts, edit pages, edit posts, edit published pages and posts, levels were set for me automatically, 0, 1 and 2, publish pages, publish posts, read, and upload files (it might be wise to disallow upload files)

Manage Your Own Posts
Imagine how difficult it would be to find your posts (and pages) among hundreds of other authors posts. We gotta clean this up, and this little gem does just that. It shows only the authors writing and hides the rest.

It isnt really a full blown plugin, but one function that packs a lot of punch. If you’re already staring at a sea of plugins and would just rather keep things tidy, you could actually copy the code and throw it into your functions.php. Heres the tiny function that saves the day…

function mypo_parse_query_useronly( $wp_query ) {
    if ( strpos( $_SERVER[ 'REQUEST_URI' ], '/wp-admin/edit.php' ) !== false ) {
        if ( !current_user_can( 'level_10' ) ) {
            global $current_user;
            $wp_query->set( 'author', $current_user->id );
        }
    }
}
add_filter('parse_query', 'mypo_parse_query_useronly' );

? Back to TOC ?

Adminimize
At this point the author admin still isnt quite right. All kinds of things are showing that shouldnt be there. Comments, media, even the ContactForm7 admin control is available. Adminimize is quite hefty, but necessary to hide all these details.

Under Settings>Adminimize – You can use the mini-menu to jump to my settings:

Menu Options – Deactivate for Author
tick the following: Media, Links, Comments (all others are hidden by default)
scroll to the bottom of this chart and look for additional plugins you have installed that need a-hiding. then Update Options.

Write Options – Deactivate for Author
This controls the sidebar options in the editor when authors ‘add a new’ page or post. I left all of the post options blank but I dont want authors to be able to change the page template. So deactivate the entire ‘Attributes’ panel. then Update Options.

There are tons of other details for all user roles, but this is all I needed get it working right.
? Back to TOC ?

Setting Up the Form For WordPress

Now that the back end is ready, its time to build front end access.

The jQuery

A few elements go into the code to get it working as planned. Lets start with jquery’s slideToggle function. In its entirety, the example code looks like this:

<!DOCTYPE html>
<html>
<head>
  <style>
  p { width:400px; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <button>Toggle</button>
  <p>
    This is the paragraph to end all paragraphs.  You
    should feel <em>lucky</em> to have seen such a paragraph in
    your life.  Congratulations!
  </p>
<script>
    $("button").click(function () {
      $("p").slideToggle("slow");
    });
</script>
</body>
</html>

Lets pull the jQuery out and edit for use in wordpress.
Open header.php in your theme template file and add the following above and below the wp_head call like so:

<?php wp_enqueue_script('jquery'); ?>
<?php wp_head(); ?>

<script type="text/javascript">
jQuery(document).ready(function(){

	jQuery(".btn-slide").click(function(){
		jQuery("#panel").slideToggle("slow");
		jQuery(this).toggleClass("active"); return false;
	}); 

});
</script>

Heres what happened:
1. We called the built in jquery library with enqueue –> before wp_head
2. Added jquery with my classes -> after wp_head
3. Changed medium to slow
4. Changed all $ to jQuery so it doesnt conflict with other scripts
5. Added “active” class. This toggles the arrows switch – up or down
? Back to TOC ?

The HTML

In the first example above jQuery gave us this html code for containers.

<button>Toggle</button>
<p>
 content
</p>

To build the html framework, I referenced WebDesignerWall’s jquery tutorials. Some great stuff here. The slide panel demo is super simple.

To break things down to their lowest common denominator, view the demo source code or download their files to grab all the example code and images.

The Form For WordPress

To incorporate the wordpress login form we’ll plugin the code provided by kriesi

Place the form code inside your header.php where you want the form to show up. You might have to play with placement and css positioning for it to behave correctly.

Heres my complete html form for wordpress

<!-- AUTHOR LOGIN form -->

  <div id="panel"> 
     <?php if (!(current_user_can('level_2'))){ ?>
        <div class="login-box">
        <form action="<?php echo get_option('home'); ?>/wp-login.php" method="post">
        <label for="log">user</label><input type="text" name="log" id="log" value="<?php echo wp_specialchars(stripslashes($user_login), 1) ?>" size="12" />
        <label for="pwd">pass</label><input type="password" name="pwd" id="pwd" size="12" />
        <input type="submit" name="submit" value="Send" class="button" /> <br />
        <label for="rememberme"><input name="rememberme" id="rememberme" type="checkbox" checked="checked" value="forever" /> remember me</label>
        <a class="lost-pass" href="<?php echo get_option('home'); ?>/wp-login.php?action=lostpassword">forgot password?</a>
        <input type="hidden" name="redirect_to" value="<?php echo $_SERVER['REQUEST_URI']; ?>/wp-admin/post-new.php" />
        </form>
        </div>
     
        
	  <?php } else { ?>
        <div class="admin-box">
            <div class="admin-col">
            <a href="<?php echo get_option('home'); ?>/wp-admin/post-new.php">Write New Post</a><br />
            <a href="<?php echo get_option('home'); ?>/wp-admin/post-new.php?post_type=page">Write New Page</a>
            </div>
            <div class="admin-col">
            <a href="<?php echo get_option('home'); ?>/wp-admin/">Dashboard</a><br />
            <a href="<?php echo get_option('home'); ?>/wp-login.php?action=logout&redirect_to=<?php echo urlencode($_SERVER['REQUEST_URI']) ?>">Log out</a>
            </div>
        </div>
      <?php }?>
  </div>

  <!-- p class="slide"><a href="#" class="btn-slide">Author Login</a></p -->
  <!-- to change button classes when an author is logged in or logged out use the following -->
  <?php
  if ( is_user_logged_in() ) {
    echo '<p class="slide-loggedin"><a href="#" class="btn-slide">Dashboard</a></p>';
  } else {
    echo '<p class="slide"><a href="#" class="btn-slide">Author Login</a></p>';
  }
  ?>

<!-- end login -->

? Back to TOC ?

and last but not least

The CSS

Here are my adapted css styles:

/* AUTHOR LOGIN */
#panel {background: #333; padding:10px; border-bottom:1px solid rgba(255,255,255,0.1);
	display: none; height:50px; border-bottom-right-radius:3px; border-bottom-left-radius:3px; box-shadow:1px 1px 5px rgba(0,0,0,0.7) 
}
.slide {float:right;
	background: url(images/trigger-login.png) no-repeat center top;
}
.slide-loggedin {float:right;
	background: url(images/trigger-logged-in.png) no-repeat center top;
}
.slide-loggedin a {color:#777; text-shadow:none; line-height:20px}

.btn-slide {
	background: url(images/white-arrow.png) no-repeat right -46px;
	text-align: center;
	width: 110px;
	height: 26px;
	padding: 10px 10px 0 0;
	margin: 0 auto;
	display: block;
	color:#fff; text-decoration:none; text-shadow:0px 2px 0px #5b0108; 
	font:bold 12px "Century Gothic", "Apple Gothic", Arial;
	text-decoration: none;
}
.active {background-position: right 14px;}
.slide a:hover {text-decoration:none;}

.login-box {text-align:center;}
.login-box label, .login-box a {padding-right:5px; font:12px "Arvo";}
.login-box #log {margin-right:10px;}
.login-box .button, input#log, .login-box input#pwd {font-size:11px; padding:3px 5px;}
.login-box #rememberme{margin-top:7px;}

/* box content if logged in */
.admin-box a {font:12px "Arvo"; color:#fff; background:url(images/white-arrow-right.png) no-repeat; padding-left:20px; line-height:24px;}
.admin-col {float:left; padding:0 25px;}

? Back to TOC ?

I used the Arvo font available from google web fonts

and my images – right click and save

jQuery trigger loginjQuery trigger logged injQuery toggle arrow

What happens now?
Hopefully all works well and you enter the world of guest authoring! Keeping things maintained is equally as important though, so a word of caution…

Maintenance.
Editing posts and pages can bloat a wp database with a quickness. Page hangs and serious lagtime may result. If you have a lot of authors, making a lot of changes, you might be doing something right, but to slim down the database to a manageable size, run the plugin better delete revision every so often to clean up your database and get your site flying again.

To come: Take it one step further. Setting up an Author Profile Template to showcase authors on their own profile page.