Lots of posts on WPShout are art directed, so you may wish to view this in your browser --> Submit WordPress Posts From The Frontend

This is a guest post by Jared Williams of New2WP.com

If you’re looking to make adding new posts without having to log into the WordPress dashboard, or maybe to allow your visitors a way to submit some kind of content of their own, then here’s a way you can create a new post form and display it on a custom page template.

In order to write a new post in WordPress you have to do a number of steps just to get started. First you must login to get to the dashboard, then go to posts, and then add new post. That’s a total of 3 page refreshes with the need to type your name and password as well, and that’s just to get to the post write page. Yeah you could use the quick post widget on the dashboard page, but then you still have to go to edit the post if you want to add a category or some tags plus any other things you may use in your post.

If you have members of your site that join so they can submit some kind of content or another, it can be even better for them as well to not have to go through all the steps it takes in submitting a new post. Plus this can be used for making a new post form for custom post types, too.

This custom post form is something I developed after trying all the form plugins I could find, including the more well known TDOForms, and Gravity forms plugins which both are quite capable of doing this but are more than I needed. I’ve even hacked, dissected, and attacked the Prologue and P2 themes since they are Twitter-style themes that have a post form right on the main page. I mean I ripped them both apart, and slaughtered the code in them to death, and failed. Prologue couldn’t do what I wanted, and the P2 theme code is so intertwined within itself it was just too much of a pain to undo the knot of code it consists of.

1. The Form

First we will set up the basic form which you can use to enter in the information to submit new posts.

<!-- New Post Form -->

<div id="postbox">

<form id="new_post" name="new_post" method="post" action="">

<p><label for="title">Title</label><br />

<input type="text" id="title" value="" tabindex="1" size="20" name="title" />

</p>

<p><label for="description">Description</label><br />

<textarea id="description" tabindex="3" name="description" cols="50" rows="6"></textarea>

</p>

<p><?php wp_dropdown_categories( 'show_option_none=Category&tab_index=4&taxonomy=category' ); ?></p>

<p><label for="post_tags">Tags</label>

<input type="text" value="" tabindex="5" size="16" name="post_tags" id="post_tags" /></p>

<p align="right"><input type="submit" value="Publish" tabindex="6" id="submit" name="submit" /></p>

<input type="hidden" name="post_type" id="post_type" value="post" />

<input type="hidden" name="action" value="post" />

<?php wp_nonce_field( 'new-post' ); ?>

</form>

</div>

<!--// New Post Form -->

There’s nothing special with this form really. The only thing is the wp_dropdown_categories() function, which creates the list of categories you can select from. You can learn more about this function here. Everything else you enter into the form will automatically create a new entry, including tags. Make sure no matter what you do, always include the wp_nonce_field(), for security reasons.

2. The PHP for Processing the Form

Here is where the fun part begins. This is the PHP which you need to process and submit the form information.

<?
if( 'POST' == $_SERVER['REQUEST_METHOD'] && !empty( $_POST['action'] )) {

	// Do some minor form validation to make sure there is content
	if (isset ($_POST['title'])) {
		$title =  $_POST['title'];
	} else {
		echo 'Please enter a title';
	}
	if (isset ($_POST['description'])) {
		$description = $_POST['description'];
	} else {
		echo 'Please enter the content';
	}
	$tags = $_POST['post_tags'];

	// Add the content of the form to $post as an array
	$post = array(
		'post_title'	=> $title,
		'post_content'	=> $description,
		'post_category'	=> $_POST['cat'],  // Usable for custom taxonomies too
		'tags_input'	=> $tags,
		'post_status'	=> 'publish',			// Choose: publish, preview, future, etc.
		'post_type'	=> $_POST['post_type']  // Use a custom post type if you want to
	);
	wp_insert_post($post);  // Pass  the value of $post to WordPress the insert function
							// http://codex.wordpress.org/Function_Reference/wp_insert_post
	wp_redirect( home_url() );
} // end IF

// Do the wp_insert_post action to insert it
do_action('wp_insert_post', 'wp_insert_post'); 

?>

Let’s go over this.

The first line checks if a post has been submitted, and if the action is not empty. You could do this check a number of ways, this is just how I’ve done it:
if( ‘POST’ == $_SERVER['REQUEST_METHOD'] && !empty( $_POST['action'] )) {

The second part is a basic form validation that checks to see if the title and description fields are set, and if so set the values to the variables $title and $description. You may want to check that each of the fields are set this way but I am just showing as an example.

Then, I set up a variable called $post, which is an array of values from the form fields.

• post_title = $title like we set above using the validation
• post_content = $description as we set
• post_category = the category that was selected
• tags_input = the tags
• post_status = publish, future or draft. Whatever you want to set it to
• post_type = post, page, or if you have set up a custom post type you can use that instead

To insert the new post information you can use the function wp_insert_post() and passing the $post variable to it. This is all of course, only if the form has been submitted which is why we put all this within the ‘if’ statement.

Update: I’ve added the function wp_redirect() after the wp_insert_post() function, to fix the redirect to a 404 page. You can change the location by passing the function an argument. For example: wp_redirect( ‘/some-page/’) or wp_redirect( home_url() ).

Close the IF statement and then add the action. The line do_action(‘wp_insert_post’, ‘wp_insert_post’); will add the wp_insert_post hook, with the wp_insert_post from the if statement as the callback, thereby adding the $post variable with all it’s information to the function. Without this line the post will not be submitted and your form will be useless.

I will leave the CSS up to you since I am not here to make your form look pretty, just work. Besides, everyone styles things differently anyways.

You can embed this code in a custom page template, say for example: page-submit.php. Copy the code from page.php and paste it in your custom template. You can create custom pate templates using page-slug.php or page-id.php. I find making custom templates this way 100 times better than using the old way, which involves assigning the page a specific template in the page attributes.

Make sure that you create a new page in the WordPress dashboard, and that your page slug or page id match the name of your template file (ie: page-submit.php – page slug = submit). This new page you create will automatically use the custom template you make, so there is no need to do anything else. You can enter content into the page if you choose to of course, but as long as the custom template includes the new post form, either above or below the_content() function you are good to go.

Download this code here

If you have any questions about this, or can’t get it to work let me know in the comments.

This is a post from WPShout. If you enjoyed the post, please head over to the site and share or leave a comment! --> Submit WordPress Posts From The Frontend

Lots of posts on WPShout are art directed, so you may wish to view this in your browser --> WordPress as a Review Site and Podcasting Site: Advanced Uses of WordPress

1. Day 1: WordPress as a Tumblelog
2. Day 2: WordPress as a Review Site and Podcasting Site
3. Day 3: WordPress as a Social Network and Twitter clone

You should never say “oh, you can’t do that in WordPress”. Because you probably can. That’s the beauty of the platform – at face value, yes, it is a blogging platform, but be a bit creative and you’ve got yourself a full blown CMS.

WordPress as a review/podcasting site

Above is a picture of Nometet.com, a games reviews site which also has a sporadically posted podcast. Nometet uses a gallery theme to great effect – each post has its own image (set through a custom field) which gets auto resized to create a lovely gallery. But where the ‘review functionality’ really kicks in is with the star ratings for reviews plugin. Each review has a star rating – simple enough, but this star rating, along with other bits of data, is sortable through a rather nice jQuery table:

As for podcasting, look no further than the excellent podPress plugin. It offers you a ton of options for iTunes integration, includes a flash player and various other bits and bobs:

WordPress as a CMS

We’ve been building up to using WordPress as a CMS. With the plugins mentioned above, you can really easily use WordPress for any number of uses. However, using it on a client project as a CMS? Use custom fields to your advantage and you’ll be fine – as I’ve said before, custom fields are what turns WordPress into a CMS – you can use them to store all sorts of information. Here’s an example. I want to display the place where an article was written, and if I haven’t entered that I’ll just display the date. Using custom fields, that’s easy:

<?php
$Place = get_post_custom_values("Place");
if ( is_array($Place) ) { ?>
Plublished in: <?php echo get_post_meta($post->ID, "Place", true); ?>
<?php }	else { ?>
Published on <?php the_time('n/d/y'); ?>
<?php }	?>

Just create a custom field ‘Place’ and enter the place where the article was written and it’ll appear. If no custom field exists, then the date the post was published on gets displayed instead.

This is a post from WPShout. If you enjoyed the post, please head over to the site and share or leave a comment! --> WordPress as a Review Site and Podcasting Site: Advanced Uses of WordPress

Lots of posts on WPShout are art directed, so you may wish to view this in your browser --> WordPress as a Social Network and Twitter clone: Advanced Uses of WordPress

Day three of [ad] continues, with a look at WordPress as a social network and Twitter site.

1. Day 1: WordPress as a Tumblelog
2. Day 2: WordPress as a Review Site and Podcasting Site
3. Day 3: WordPress as a Social Network and Twitter clone

As I mentioned the other day,  the multi-user version of WordPress is called WordPressMU. Installing WPMU is something I’ve covered before here on WPShout, so check that out for details how to install it. With WordPress MU installed, there’s an excellent plugin you can add called BuddyPress. Again, I’ve written about how to install BuddyPress and get to grips with it before, so check out those tutuorials.

Whilst we’re not strictly using WordPress here, it’s close enough, and the possibilities for expansion are huge – just take a look at the Telegraph’s blogs – all run on WordPress MU.

<meta name="generator" content="WordPress 2.7.1" /> 

Interestingly, though, they’re only running 2.7.1!

Making a Twitter clone with WordPress

Twitter clones are all the range these days, and, thankfully, there’s a WordPress theme that does the job of Twitter clone. Prologue, or P2, allows you to make your own Twitter clone on any WordPress install – just set up a new install of WordPress, click ‘Add New Themes’, do a search for P2, install it and activate it. And you’re done.

With P2 installed, the subscribe to comments plugin is pretty darn useful and you might want to restrict access to only those who are logged in.

Concluding

Just a (comparatively) quick post today and not a mention of custom fields! It would have been longer, but it occurred to me halfway through writing the post that I’d already written what I wanted to say! Join us tomorrow to find out how to use WordPress as a review site.

This is a post from WPShout. If you enjoyed the post, please head over to the site and share or leave a comment! --> WordPress as a Social Network and Twitter clone: Advanced Uses of WordPress

Lots of posts on WPShout are art directed, so you may wish to view this in your browser --> WordPress as a Tumblelog, CMS: Advanced Uses of WordPress

1. Day 1: WordPress as a Tumblelog
2. Day 2: WordPress as a Review Site and Podcasting Site
3. Day 3: WordPress as a Social Network and Twitter clone

You should never say “oh, you can’t do that in WordPress”. Because you probably can. That’s the beauty of the platform – at face value, yes, it is a blogging platform, but be a bit creative and you’ve got yourself a full blown CMS.

WordPress as an advanced blogging platform

The image above is a screen of BinaryMoon.co.uk, Ben Gillbanks’ blog. It’s powered by WordPress and look at it! Popular posts on a scrolling, jQuerified block, recent posts from various categories down the sidebar, with one post only having an excerpt. It’s a brilliant example of how you can use WordPress as an advanced blogging platform; a good knowledge of the template hierarchy, the basics of WordPress development and some design skills and you’re effectively there. Sites such as Ben’s prove just how versatile WordPress is as a blogging platform. Speaking of which…

WordPress as a Tumblelog

Microblogging is yet another thing that WordPress is brilliantly suited to. To prove the point, I’ve just very quickly created a Biblioteca child theme which acts as a Tumblelog: using custom fields and custom write panels I’ve been able to set up a homepage where the latest posts get displayed, in Tumblelog form. However, there’s a bonus – again, using  just custom fields, you can post links! It’s all very clever – the image above is the actual theme – I just took Biblioteca, created a child theme of it, got rid of the sidebar and made it single column and I was left with a decent Tumble-like design. Taking it further though, the first post – WPShout – is actually a link to WPShout. How? Using Biblioteca‘s custom write meta box thingys (I still don’t know the technical term!) I can create a new post which contains the link and then under ‘title’ type in the link URL:

And to integrate that onto the homepage, I can use the following:

<?php
$Post = get_post_custom_values("Title");
if ( is_array($Post) ) { ?>
<h2 class="posttitle"><?php echo get_post_meta($post->ID, "Title", true); ?></h2>
<?php }	else { ?>
<h2 class="posttitle"><a href="<?php the_permalink() ?>"><?php the_title();?></a></h2>
<?php }	?>

The clever bit here is that for normal blog posts, just leave the field blank and the title gets displayed. It’s really easy to create something like this so go on! Do it!

Concluding

Throughout this week I’m going to bang on about custom fields, which I make no apology for; they’re a brilliant way of storing extra information about posts and you can’t ignore them! Join us on Wednesday to find out how to use WordPress as a social network with Twitter-like functionality.

This is a post from WPShout. If you enjoyed the post, please head over to the site and share or leave a comment! --> WordPress as a Tumblelog, CMS: Advanced Uses of WordPress

Lots of posts on WPShout are art directed, so you may wish to view this in your browser --> Advanced Uses of WordPress

This is the third of WPShout‘s themed weeks, this time with the foucs being on advanced uses of WordPress. Whilst WordPress is traditionally a blogging platform, that is certainly not the only use for it. Throughout this week we’re going to be looking at [ad], with the table of contents as follows:

1. Day 1: WordPress as a Tumblelog
2. Day 2: WordPress as a Review Site and Podcasting Site
3. Day 3: WordPress as a Social Network and Twitter clone

(if the links don’t work, that means coming soon!)

The introductory bit

WordPress is a great blogging platform. A simple, easy to use backend and scope for development with plugins and themes. WordPress is also a brilliant CMS. More and more, WordPress is being used for all kinds of different sites; the power of WordPress themes and frameworks, such as Biblioteca, make WordPress a really powerful CMS. You’ve just got the think outside the box. You want to make a site with a large featured post, explaining about a product, with links to buy the product and recent blog posts on the sidebar? Easy. In WordPress you could use widgets, create a category for the featured product and display the post with the info on it. You could use custom fields, harcode it with a custom page template… the options are endless. That’s the point I’m going to attempt to convey this week; you want to do literally anything? WordPress can do it for you.

Advanced Uses of WordPress’ Reading List

There are a couple of posts here on WPShout that you should read before delving into the series to give you a solid understanding of all the jargon I’m using and all the options available to you:

• "A Beginner Guide To WordPress Theme Development"
• 10 Awesome Things to do with WordPress’ Custom Fields
• Creating the perfect widget ready WordPress theme
• WordPress’ Template File Hierarchy Explained

With those posts read and understood, you’ll be in pretty good shape for the rest of the week’s post. Make sure you subscribe by RSS to catch the full week’s postings.

This is a post from WPShout. If you enjoyed the post, please head over to the site and share or leave a comment! --> Advanced Uses of WordPress

Lots of posts on WPShout are art directed, so you may wish to view this in your browser --> Create An Advanced Theme Options Page in WordPress: Day 4

Day 4 of Creating an Advanced Theme Options Page in WordPress is here!

Today comes the exciting implementation of our options page that we created yesterday. The first thing to do is to create a new file called get-theme-options.php and save it with your theme files. In this file paste the following:

<?php
//allows the theme to get info from the theme options page
global $options;
foreach ($options as $value) {
    if (get_option( $value['id'] ) === FALSE) { $$value['id'] = $value['std']; }
    else { $$value['id'] = get_option( $value['id'] ); }
    }
?>

What it does is it allows us to reference the options we’ve selected in the backend. We need to include it in every file that you want to use theme options, which we can do with the following:

<?php include (TEMPLATEPATH.'/get-theme-options.php'); ?>

Implementing Feedburner

The very first option on our options page was the Feedburner address, where users could input their Feedburner URL and it’ll become the RSS feed. With get-theme-options at the top of our header.php file, to get the contents of the Feedburner field from the options page, it’s just a simple echo. At this point you’ll need the shortname you entered in part two and combine this with the ID for the Feedburner, in our example with a shortname of blt and the feedburner ID of _feedburner, that makes blt_feedburner. Combine that with an echo and you get this:

<?php echo $blt_feedburner;?>

Add this to the RSS link in the header and you’ll get something like this:

<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?>" href="<?php echo $blt_feedburner; ?>" />

The same applies to the other text boxes -

<?php echo $[shortname][ID]; ?>

. For example, for the Analytics code, you’d implement it like so

 <?php echo $blt_analytics; ?>

, replacing ‘blt’ with the shortname you selected.

Changing the layout

The next thing we wanted to let users do was enable/disable certain features, with the first option being change the layout. To be able to do this you’ll need to have two (or more) stylesheets, with the different layouts in them. Our example had three layouts to choose from – standard, widened content area and three columns. I’ve created three separate stylesheets, two-column.css, two-column-wide.css and three-column.css. These have been uploaded to /mytheme/css/. With that done, next step is to open up your header.php file and find where the stylesheet is referenced. Below that, with get-theme-options included, copy and paste the following, changing the shortname and ID if necessary:

<?php if ($blt_three_column == "true") {?>

<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/css/three-column.css" type="text/css" media="screen,projection" />

<?php }?>

<?php if ($blt_two_column == "true") {?>

<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/css/two-column.css" media="screen,projection" />

<?php }?>

<?php if ($blt_two_column_wide == "true") {?>

<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/css/two-column-wide.css" type="text/css" media="screen,projection" />

<?php }?>

Essentially all we’re doing here is saying if checkbox x is true, do this:.

implementing checkboxes: show and hide

The same principal applies to showing and hiding ‘stuff’: to hide ‘Homepage Area 1’ I can do so with the following:

<?php //make sure you include get-theme-options

if ($blt_homepage_area_1 == "true") {?>

<!—homepage area one here -->

<?php }?>

And that is all there is to it! You can obviously repeat the principal, so for ‘Homepage Area 2’ you’d need:

<?php //make sure you include get-theme-options

if ($blt_homepage_area_2 == "true") {?>

<!—homepage area two here -->

<?php }?>

The other option you’ve got is if a checkbox is unticked; just change true to false:

<?php //make sure you include get-theme-options

if ($blt_homepage_area_2 == "false") {?>

<!—homepage area two here -->

<?php }?>

Concluding

And with that, we’ve finished implementing all the different options we created – now spend the next five minutes enabling and disabling! We’ve also finished the week’s series, but with still a day to go, not to worry; tomorrow we’ll be wrapping up. See you then!

This is a post from WPShout. If you enjoyed the post, please head over to the site and share or leave a comment! --> Create An Advanced Theme Options Page in WordPress: Day 4

Lots of posts on WPShout are art directed, so you may wish to view this in your browser --> Create An Advanced Theme Options Page in WordPress: Day 3

Day three of Creating an Advanced Theme Options Page in WordPress is here! Today we’ll be taking the options we made yesterday, styling them and creating the actual page that displays them in the WordPress backend.

Creating the options page

The first thing we’re going to do today is create the actual page that shows the options, which we can do with the following code, pasted straight after where we left off yesterday, in the functions.php file:

	);

function mytheme_add_admin() {

    global $themename, $shortname, $options;

    if ( $_GET['page'] == basename(__FILE__) ) {

        if ( 'save' == $_REQUEST['action'] ) {

                foreach ($options as $value) {
                    update_option( $value['id'], $_REQUEST[ $value['id'] ] ); }

                foreach ($options as $value) {
                    if( isset( $_REQUEST[ $value['id'] ] ) ) { update_option( $value['id'], $_REQUEST[ $value['id'] ]  ); } else { delete_option( $value['id'] ); } }

                header("Location: themes.php?page=theme-options.php&saved=true");
                die;

        } else if( 'reset' == $_REQUEST['action'] ) {

            foreach ($options as $value) {
                delete_option( $value['id'] ); }

            header("Location: themes.php?page=theme-options.php&reset=true");
            die;

        } else if ( 'reset_widgets' == $_REQUEST['action'] ) {
            $null = null;
            update_option('sidebars_widgets',$null);
            header("Location: themes.php?page=theme-options.php&reset=true");
            die;
        }
    }

    add_theme_page($themename." Options", "Bibliteca Options", 'edit_themes', basename(__FILE__), 'mytheme_admin');

}

function mytheme_admin() {

    global $themename, $shortname, $options;

    if ( $_REQUEST['saved'] ) echo '<div id="message" class="updated fade"><p><strong>'.$themename.' '.__('settings saved.','thematic').'</strong></p></div>';
    if ( $_REQUEST['reset'] ) echo '<div id="message" class="updated fade"><p><strong>'.$themename.' '.__('settings reset.','thematic').'</strong></p></div>';
    if ( $_REQUEST['reset_widgets'] ) echo '<div id="message" class="updated fade"><p><strong>'.$themename.' '.__('widgets reset.','thematic').'</strong></p></div>';

?>

Styling the elements

The options page is actually just a table, with each element a new row, split into columns, so first, we need to start the table:

<div="wrap">

<?php if ( function_exists('screen_icon') ) screen_icon(); ?>

<h2><?php echo $themename; ?> Options</h2>

<form method="post" action="">

<table class="form-table">

<?php foreach ($options as $value) {

Next, we’re going to style each element, one by one. As I explained yesterday, we can do this once and the PHP will apply the styling multiple times.

Styling the small text area

This code must go underneath the code above, otherwise you’ll get lots of errors! As you can see, it’s just a table, echoing the values we entered yesterday:

switch ( $value['type'] ) {
		case 'text':
		?>
		<tr valign="top">
			<th scope="row"><label for="<?php echo $value['id']; ?>"><?php echo __($value['name'],'thematic'); ?></label></th>
			<td>
				<input name="<?php echo $value['id']; ?>" id="<?php echo $value['id']; ?>" type="<?php echo $value['type']; ?>" value="<?php if ( get_option( $value['id'] ) != "") { echo get_option( $value['id'] ); } else { echo $value['std']; } ?>" />
				<?php echo __($value['desc'],'thematic'); ?>

			</td>
		</tr>

Styling the large text area

This too goes underneath the code above, and is much the same idea as before.

<?php
		break;

		case 'textarea':
		$ta_options = $value['options'];
		?>
		<tr valign="top">
			<th scope="row"><label for="<?php echo $value['id']; ?>"><?php echo __($value['name'],'thematic'); ?></label></th>
			<td><textarea name="<?php echo $value['id']; ?>" id="<?php echo $value['id']; ?>" cols="<?php echo $ta_options['cols']; ?>" rows="<?php echo $ta_options['rows']; ?>"><?php
				if( get_option($value['id']) != "") {
						echo __(stripslashes(get_option($value['id'])),'thematic');
					}else{
						echo __($value['std'],'thematic');
				}?></textarea><br /><?php echo __($value['desc'],'thematic'); ?></td>
		</tr>

Styling the title

The title is breaking from the norm here by ending the table, displaying the title’s description and then restarting the table so the rest of the elements display fine:

<?php
		break;

		case 'nothing':
		$ta_options = $value['options'];
		?>
		</table>
			<?php echo __($value['desc'],'thematic'); ?>
		<table class="form-table">

Styling the checkbox

<?php
		break;

		case 'radio':
		?>
		<tr valign="top">
			<th scope="row"><?php echo __($value['name'],'thematic'); ?></th>
			<td>
				<?php foreach ($value['options'] as $key=>$option) {
				$radio_setting = get_option($value['id']);
				if($radio_setting != ''){
					if ($key == get_option($value['id']) ) {
						$checked = "checked=\"checked\"";
						} else {
							$checked = "";
						}
				}else{
					if($key == $value['std']){
						$checked = "checked=\"checked\"";
					}else{
						$checked = "";
					}
				}?>
				<input type="radio" name="<?php echo $value['id']; ?>" id="<?php echo $value['id'] . $key; ?>" value="<?php echo $key; ?>" <?php echo $checked; ?> /><label for="<?php echo $value['id'] . $key; ?>"><?php echo $option; ?></label><br />
				<?php } ?>
			</td>
		</tr>
		<?php
		break;

		case 'checkbox':
		?>
		<tr valign="top">
			<th scope="row"><?php echo __($value['name'],'thematic'); ?></th>
			<td>
				<?php
					if(get_option($value['id'])){
						$checked = "checked=\"checked\"";
					}else{
						$checked = "";
					}
				?>
				<input type="checkbox" name="<?php echo $value['id']; ?>" id="<?php echo $value['id']; ?>" value="true" <?php echo $checked; ?> />
				<label for="<?php echo $value['id']; ?>"><?php echo __($value['desc'],'thematic'); ?></label>
			</td>
		</tr>

Ending the options page

<?php
		break;

		default:

		break;
	}
}
?>

	</table>

	<p class="submit">
		<input name="save" type="submit" value="<?php _e('Save changes','thematic'); ?>" />
		<input type="hidden" name="action" value="save" />
	</p>
</form>
<form method="post" action="">
	<p class="submit">
		<input name="reset" type="submit" value="<?php _e('Reset','thematic'); ?>" />
		<input type="hidden" name="action" value="reset" />
	</p>
</form>

<p>Biblioteca theme.</p>
</div>
<?php
}

add_action('admin_menu' , 'mytheme_add_admin'); 

?>

With all the code above in our functions.php file, we can end the table, add save and reset buttons and close up all the loose ends. With that, we’re done creating the options page itself. All that is left to do is merge the functions-options.php and functions.php file. Make sure you first create a backup of the original functions.php file before merging the two files. With the two files merged, refresh the WordPress backend and you should see your new options page! If you’re getting any errors, make sure you’ve put the code outside closing

?>

and wrapped your own code in

<?php and ?>

. If that doesn’t fix it, restore the original file and leave a comment with your problem, with as much detail as possible.

Wrapping up

If you haven’t already noticed, the download that includes all of the code used in today’s tutorial is available at the top of the page, to save you copying and pasting it. Tomorrow we’ve got the exciting job of implementing all of the options we’ve created, and until then, why not [f], leave a comment and subscribe by RSS!

This is a post from WPShout. If you enjoyed the post, please head over to the site and share or leave a comment! --> Create An Advanced Theme Options Page in WordPress: Day 3

Lots of posts on WPShout are art directed, so you may wish to view this in your browser --> Create An Advanced Options Page in WordPress: Day 2

Continuing WPShout‘s series on Creating an Advanced Theme Options Page in WordPress, today we’re going to be creating the different options.

Introduced yesterday, this is the second installment of this month’s themed week – create an advanced options page in WordPress. Today we’re going to be creating the different types of options that we can use in our theme options page. The code used in this tutorial comes from my WordPress theme, Biblioteca.

Types of options

There are four different ‘types’ of options we’re going to create today: title, large text box, small text box and checkbox. With these four different types of options available to us, we’ll be able to cover all the bases – give users the option to show and hide elements, enter ad codes, Feedburner addresses – anything really. However, as we’re creating an advanced options page here’s a screen of the full options page we’ll be creating over the week:

Fig 2.1: The Options Page We’re Creating

As the image above shows, there are four main elements to our options page. First is the Feedburner URL, next is letting the user choose a layout, after that showing and hiding various elements and finally text areas for ad codes, footer text and Analytics code.

Getting started

So let’s get started. The template file we’re using to create the options page is called the functions.php file, but we’re not going to start putting data straight into that just yet, so instead open up your code editor of choice and create a new file, functions-options.php. Save this new file with your theme files.

Open it up in your editor of choice. First, we need to specify a ‘themename’ and ‘shortname’. The ‘themename’ should be your theme’s name and ‘shortname’ a shortened version of it. For example, Biblioteca is shortened to ‘blt’:

<?php

// Create your own options page --> http://wpshout.com/create-an-advanced-options-page-in-wordpress/

$themename = "Bibliteca";

$shortname = "blt";

Creating a small text box

Fig 2.2: an example small text box

Simple enough so far. Next we move onto a PHP array that lets us specify various elements we want to be displayed, and then style these elements, applying the same styling multiple times. Simpler, we’re going to fill out various boxes with the information about our theme options. Tomorrow we’re going to by styling them. The first of our options is the Feedburner URL. We’ve got five different options we can specify: title of the element, description, an ID, what is displayed by standard and what type of input to offer. We want to name our element ‘Feedburner URL’, with a description ‘Copy and paste your Feedburner URL here’. We want an ID of ‘_feedburner’, standard text of ‘http://feeds2.feedburner.com/’ and an input type of text. We can achieve that with the code below:

array(

"name" => __('Feedburner URL'),

"desc" => __("Copy and paste your Feedburner URL"),

"id" => $shortname."_feedburner",

"std" => "http://feeds2.feedburner.com/",

"type" => "text"),

To create other options we’re effectively just copying and pasting the code, changing the different elements we want. If you want a small text box, use the code above as a base. We’ll now do a single example of each of the types of element we’re going to be creating.

Creating a title

Fig 2.3: An example title

The next element down on our options page is a title. The title hasn’t got too many different fields we need to fill in, just a description and a type, so to have a title ‘Choose a layout below’ we need the following code:

array(

"desc" => __("<h3>Choose a layout below</h3>"),

"type" => "title"),

You’ll notice the ‘Choose a layout’ is in an <h3> tag, so that it stands out.

Creating a checkbox

Fig 2.4: An example checkbox

The third element we need is a checkbox that lets the user enable or disable elements. To create a checkbox with the option to hide ‘Sidebar Area 1’, a the description ‘Hide Sidebar Area 1?’, ID ‘_sidebar_area_1’ and a standard of false (or in other words the box unchecked; the option is ‘true’) we’ll need the following code:

array(

"name" => __('Sidebar Area 1'),

"desc" => __("Hide Sidebar Area 1?"),

"id" => $shortname."_sidebar_area_1",

"std" => "false",

"type" => "checkbox"),

Again, this can be changed to create other elements. For example, if we wanted the option ‘Hide Homepage Area 1’ we’d need the following:

array(

"name" => __('Homepage Area 1'),

"desc" => __("Hide Homepage Area 1?"),

"id" => $shortname."_home_area_1",

"std" => "false",

"type" => "checkbox"),

Creating a large textbox

Fig 2.5: An example large text box

The final element we need is a large text box. One of the large text boxes was where the user could paste an ad code for an advert size 300×250. We can create one with the following:

array(     "name" => __('Ad code at 300x250 size'),

"desc" => __("Copy and paste into the box below your advert code at 300x250 size"),

"id" => $shortname."_300_250_ad",

"std" => __(""),

"type" => "textarea",

"options" => array(

"rows" => "5",

"cols" => "94") ),

The first three lines should look familiar by now, and as we don’t want anything to be displayed as standard, the space between the quotation marks is blank. The type for a large text area is ‘textarea’. Now you’ll notice we’ve got a couple more options – rows and columns. These are setting the height and width of the text box.

Changing things slightly

We’ve now created an example of each of the main elements, and to create others you just change the name, description etc. I’m not going to create a single example for each. Instead, you can download a txt file at the top of the post with all of the options already in it. Note that it won’t actually do anything at the minute and will probably land you with a big error; you need tomorrow’s styling for the page to display properly. Make sure you subscribe by RSS and follow me on Twitter to catch it!

This is a post from WPShout. If you enjoyed the post, please head over to the site and share or leave a comment! --> Create An Advanced Options Page in WordPress: Day 2

Lots of posts on WPShout are art directed, so you may wish to view this in your browser --> Create An Advanced Theme Options Panel in WordPress

This is the start of WPShout‘s second ‘themed week’, which run every first week of the month. Last month we got started with WordPress theme development and this month we’re going to be creating an advanced theme options page.

Creating a WordPress theme options page is something that we’ve touched on before on WPShout, and this week we’ll be expanding on what we covered before to create not just a theme options page, but an advanced theme options page; we’ll be creating something that lets users change layouts, hide and display different elements dotted around the theme, enter ad codes, footer text, tracking codes, Feedburner URLs, anything really:

This is a screen of the options page we’ll be creating over the next couple of days – as you can see, pretty impressive! The plan for the week is as follows:

• Day 1: Introduction
• Day 2: Creating the different options
• Day 3: Styling the options page
• Day 4: Implementing the options into a theme

And that’s pretty much it. Unlike last time there won’t be a free eBook to download at the end of the week, but this is a shorter series at only four days. Throughout the week you’ll be most welcome to ask any questions etc etc through the comments, and I’d ask if you’re going to save the series to any social media site then please save this post. The code for the tutorial series comes from my WordPress theme framework, Biblioteca (that in turn is based on Thematic’s options page).

That’s all the admin stuff out the way, so subscribe by RSS, save this post to Delicious and grab a cup of tea. It’s going to be an interesting week.

This is a post from WPShout. If you enjoyed the post, please head over to the site and share or leave a comment! --> Create An Advanced Theme Options Panel in WordPress

Lots of posts on WPShout are art directed, so you may wish to view this in your browser --> Add A Meta Box In WordPress

Creating the options pages is something we’ve touched upon previously here on WPShout, and whilst developing my soon-to-be-released WordPress theme, Biblioteca, I wanted to add some options to the post writing page, and in this post I’m going to be sharing how I did it.

How the in-post options work

Basically, we’re going to be adding some boxes to the post and page writing pages that give our users a number of options, including customising the <title> tag, the meta description and the URL of a featured image:

These options get displayed immediately below the post/page writing area, and the user can enter text. This text, when the post is saved gets saved as custom fields. For example, on this post I’ll enter some text “Hello. This is a test.”  in the “Image” field. The results are below:

So that proves it works! Let’s get straight into implementing it. First off, all credits go to Justin Tadlock – code comes more or less straight out of Hybrid.

Making the in post options

The first thing you need to do in order to make your own in post options is to open up your functions.php file. This is the file that gives you a lot of power, but can also totally wreck your theme – power comes with responsibility! Always have a backup readily to hand.

The first code to add is the following, which does the job of adding the box to the admin menu:

<?php
/**
Made with the help of a tutorial at WPShout.com => http://wpshout.com.

Courtesy of the Hybrid theme - themehybrid.com

/* Add a new meta box to the admin menu. */
	add_action( 'admin_menu', 'hybrid_create_meta_box' );

/* Saves the meta box data. */
	add_action( 'save_post', 'hybrid_save_meta_data' );

/**
 * Function for adding meta boxes to the admin.
 * Separate the post and page meta boxes.

function hybrid_create_meta_box() {
	global $theme_name;

	add_meta_box( 'post-meta-boxes', __('Post options'), 'post_meta_boxes', 'post', 'normal', 'high' );
	add_meta_box( 'page-meta-boxes', __('Post options'), 'page_meta_boxes', 'page', 'normal', 'high' );
}

With that added, the next step is to start an array which will be the text used by the options page. The ‘name’ is the name of the custom field that will be generated by the options. Next is the text displayed on the right and finally the ‘type’ is what type of box the theme is to display; either the large textarea or the smaller single line text:

function hybrid_post_meta_boxes() {

	/* Array of the meta box options. */
	$meta_boxes = array(
		'title' => array( 'name' => 'Title', 'title' => __('Title', 'hybrid'), 'type' => 'text' ),
		'description' => array( 'name' => 'Description', 'title' => __('Description', 'hybrid'), 'type' => 'textarea' ),
		'image' => array( 'name' => 'Image', 'title' => __('Image:', 'hybrid'), 'type' => 'text' ),
		'featured' => array( 'name' => 'Featured', 'title' => __('Featured img:', 'hybrid'), 'type' => 'text' ),

	);

	return apply_filters( 'hybrid_post_meta_boxes', $meta_boxes );
}

You’ll notice the last bit of code is for pages only, where no featured image option is added.

Next, the code that displays the boxes and formats them:

function post_meta_boxes() {
	global $post;
	$meta_boxes = hybrid_post_meta_boxes(); ?>

	<table class="form-table">
	<?php foreach ( $meta_boxes as $meta ) :

		$value = get_post_meta( $post->ID, $meta['name'], true );

		if ( $meta['type'] == 'text' )
			get_meta_text_input( $meta, $value );
		elseif ( $meta['type'] == 'textarea' )
			get_meta_textarea( $meta, $value );
		elseif ( $meta['type'] == 'select' )
			get_meta_select( $meta, $value );

	endforeach; ?>
	</table>
<?php
}

/**
 * Displays meta boxes on the Write Page panel.  Loops
 * through each meta box in the $meta_boxes variable.
 * Gets array from hybrid_page_meta_boxes()
 *
 * @since 0.3
 */
function page_meta_boxes() {
	global $post;
	$meta_boxes = hybrid_page_meta_boxes(); ?>

	<table class="form-table">
	<?php foreach ( $meta_boxes as $meta ) :

		$value = stripslashes( get_post_meta( $post->ID, $meta['name'], true ) );

		if ( $meta['type'] == 'text' )
			get_meta_text_input( $meta, $value );
		elseif ( $meta['type'] == 'textarea' )
			get_meta_textarea( $meta, $value );
		elseif ( $meta['type'] == 'select' )
			get_meta_select( $meta, $value );

	endforeach; ?>
	</table>
<?php
}

/**
 * Outputs a text input box with arguments from the
 * parameters.  Used for both the post/page meta boxes.
 *
 * @since 0.3
 * @param array $args
 * @param array string|bool $value
 */
function get_meta_text_input( $args = array(), $value = false ) {

	extract( $args ); ?>

	<tr>
		<th style="width:10%;">
			<label for="<?php echo $name; ?>"><?php echo $title; ?></label>
		</th>
		<td>
			<input type="text" name="<?php echo $name; ?>" id="<?php echo $name; ?>" value="<?php echo wp_specialchars( $value, 1 ); ?>" size="30" tabindex="30" style="width: 97%;" />
			<input type="hidden" name="<?php echo $name; ?>_noncename" id="<?php echo $name; ?>_noncename" value="<?php echo wp_create_nonce( plugin_basename( __FILE__ ) ); ?>" />
		</td>
	</tr>
	<?php
}

/**
 * Outputs a select box with arguments from the
 * parameters.  Used for both the post/page meta boxes.
 *
 * @since 0.3
 * @param array $args
 * @param array string|bool $value
 */
function get_meta_select( $args = array(), $value = false ) {

	extract( $args ); ?>

	<tr>
		<th style="width:10%;">
			<label for="<?php echo $name; ?>"><?php echo $title; ?></label>
		</th>
		<td>
			<select name="<?php echo $name; ?>" id="<?php echo $name; ?>">
			<?php foreach ( $options as $option ) : ?>
				<option <?php if ( htmlentities( $value, ENT_QUOTES ) == $option ) echo ' selected="selected"'; ?>>
					<?php echo $option; ?>
				</option>
			<?php endforeach; ?>
			</select>
			<input type="hidden" name="<?php echo $name; ?>_noncename" id="<?php echo $name; ?>_noncename" value="<?php echo wp_create_nonce( plugin_basename( __FILE__ ) ); ?>" />
		</td>
	</tr>
	<?php
}

/**
 * Outputs a textarea with arguments from the
 * parameters.  Used for both the post/page meta boxes.
 *
 * @since 0.3
 * @param array $args
 * @param array string|bool $value
 */
function get_meta_textarea( $args = array(), $value = false ) {

	extract( $args ); ?>

	<tr>
		<th style="width:10%;">
			<label for="<?php echo $name; ?>"><?php echo $title; ?></label>
		</th>
		<td>
			<textarea name="<?php echo $name; ?>" id="<?php echo $name; ?>" cols="60" rows="4" tabindex="30" style="width: 97%;"><?php echo wp_specialchars( $value, 1 ); ?></textarea>
			<input type="hidden" name="<?php echo $name; ?>_noncename" id="<?php echo $name; ?>_noncename" value="<?php echo wp_create_nonce( plugin_basename( __FILE__ ) ); ?>" />
		</td>
	</tr>
	<?php
}

And finally, saving the options entered as custom fields:

/**
 * Loops through each meta box's set of variables.
 * Saves them to the database as custom fields.
 *
 * @since 0.3
 * @param int $post_id
 */
function hybrid_save_meta_data( $post_id ) {
	global $post;

	if ( 'page' == $_POST['post_type'] )
		$meta_boxes = array_merge( hybrid_page_meta_boxes() );
	else
		$meta_boxes = array_merge( hybrid_post_meta_boxes() );

	foreach ( $meta_boxes as $meta_box ) :

		if ( !wp_verify_nonce( $_POST[$meta_box['name'] . '_noncename'], plugin_basename( __FILE__ ) ) )
			return $post_id;

		if ( 'page' == $_POST['post_type'] && !current_user_can( 'edit_page', $post_id ) )
			return $post_id;

		elseif ( 'post' == $_POST['post_type'] && !current_user_can( 'edit_post', $post_id ) )
			return $post_id;

		$data = stripslashes( $_POST[$meta_box['name']] );

		if ( get_post_meta( $post_id, $meta_box['name'] ) == '' )
			add_post_meta( $post_id, $meta_box['name'], $data, true );

		elseif ( $data != get_post_meta( $post_id, $meta_box['name'], true ) )
			update_post_meta( $post_id, $meta_box['name'], $data );

		elseif ( $data == '' )
			delete_post_meta( $post_id, $meta_box['name'], get_post_meta( $post_id, $meta_box['name'], true ) );

	endforeach;
}
?>

And we’re done creating the options! Next, we’re going to be implementing these options.

Giving the user the option to change the title tag without a plugin

The first field/option we offered was “Title”. Obviously we’re going to use this as the <title> tag for our post. How? As you may recall, the text input into the boxes gets spitted out as a custom field, so we can display the “Title” as the title tag with the following (open up the header.php):

<title><?php echo get_post_meta($post->ID, "Title", true); ?></title>

But that would be a seriously bad idea. What if it’s the homepage?! What if there is no custom field?! The folllowing is much better; it should be used in conjunction with your current SEO’d setup, will only display on posts and pages and has an option for if no custom field exists:

<?php if ( is_single() || is_page() ) { ?><?php $title = get_post_meta($post->ID, 'Title', true);  if ($title) { ?>
<?php echo get_post_meta($post->ID, "Title", true); ?> | <?php bloginfo('name'); ?>
<?php } else { ?>
<?php wp_title(''); ?> | <?php bloginfo('name'); ?>
<?php } ?>
<?php } ?>

Giving the user the option to change the meta description without a plugin

The second field was ‘Description’. This is your meta description, an important part of your SEO strategy. Similar code to the above will display the content of the box, but with a fall back for if no custom field exists:

lt;?php if (is_single() || is_page() ) : if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<meta name="description" content="<?php $description = get_post_meta($post->ID, 'Description', true);  if ($description) { ?><?php echo get_post_meta($post->ID, "Description", true); ?>
<?php } else { ?><?php the_excerpt_rss(); ?><?php } ?>" />
<?php endwhile; endif; elseif(is_home()) : ?>
<meta name="description" content="<?php bloginfo('description'); ?>" />
<?php endif; ?>

Displaying images

The final field was the URL for a ‘featured’ image. We can integrate this into our WordPress theme with the following:

<?php $postimageurl = get_post_meta($post->ID, 'Image', true); if ($postimageurl) { ?>
<img src="<?php bloginfo('template_url'); ?>/scripts/timthumb.php?src=<?php echo get_post_meta($post->ID, "Image", true); ?>&h=250&w=250&zc=1" alt=""> 
<?php }else { ?> 
<img src="<?php bloginfo('template_url'); ?>/images/noimage.jpg" alt="No image available" />
<?php } ?>

Concluding

With that, we’re finished creating our in post options! The download for the code is available at the top of the post. This is a brilliant, simple and effective way to improve your WordPress theme.

If you have enjoyed this post, please take a second to save it to your favourite social bookmarking site with the links below and even subscribe by RSS or follow me on Twitter! Any questions, suggestions or queries, please do leave a comment.

This is a post from WPShout. If you enjoyed the post, please head over to the site and share or leave a comment! --> Add A Meta Box In WordPress