New2WP » Noob

Create A Simple Metabox For Custom Post Types

Jared — Wed, 02 Feb 2011 16:05:09 +0000

Making a URL and Description Custom Metabox

Recently this topic was suggested as a new post idea for me to write about, so here I am writing about it. You can let me know of other ideas or topics you'd like to see a tutorial on here whenever you want, and if I am able to do it and have time I will surely do it.

So say you have a custom post type on your site, and as part of that post type, you want to allow for a way to enter in a URL and maybe a description or text of some sort for something related to the URL. This is not hard to do, it simply requires a couple of functions to do.

What Functions Are Needed

We will need a function for displaying the metabox form fields, which will be used to save and update the data we enter into it.
Then a function for processing the metabox form elements, in order to perform the actions of saving and updating the information.
A function for adding the custom metabox function to WordPress via the 'init' action hook.
Finally, we need a function to get and return the values of the fields for use within the theme on the frontend.

1. Displaying The Custom Metabox

First thing we need to do is create the metabox form fields. In doing that, we want to also check if there is any data saved in the post meta for the custom fields we are making, so we can output that into the input fields of the form.

Since we are making a URL input field, we should check to see if the URL entered is a valid URL using a regular expression. For this example I am just using a simple regex which will check to make sure the URL at least has the 'http://' at the beginning. If it does not, I output the message saying it's invalid, and add it to the input field.

/**
 * Display the metabox
 */
function url_custom_metabox() {
	global $post;
	$urllink = get_post_meta( $post->ID, 'urllink', true );
	$urldesc = get_post_meta( $post->ID, 'urldesc', true );

	if ( !preg_match( "/http(s?):\/\//", $urllink )) {
		$errors = 'Url not valid';
		$urllink = 'http://';
	} 

	// output invlid url message and add the http:// to the input field
	if( $errors ) { echo $errors; } ?>

	Url:

		
	Description:

		<?php if( $urldesc ) { echo $urldesc; } ?>

Notice how I am checking if the meta fields have a value and if they do, then echo it out within the input and textarea fields.
2. Processing the Metabox Form Fields
Next, we need to process this information when the form is submitted to save as a draft or publish the post. There are a number of ways to do this, but the simplest way to do it is just simply pass the $post_id to the function, and make $post global. 
Then check if the $_POST variable is set, meaning has the form been submitted, and if so then update our post meta options using update_post_meta().
/**
 * Process the custom metabox fields
 */
function save_custom_url( $post_id ) {
	global $post;	

	if( $_POST ) {
		update_post_meta( $post->ID, 'urllink', $_POST['siteurl'] );
		update_post_meta( $post->ID, 'urldesc', $_POST['urldesc'] );
	}
}

That is obviously the most basic of ways to do it, but it works for what we want to do.
3. Adding The Metabox to your Custom Post Type
In order to make this all work, we of course need to add the functions to WordPress so it knows to do something with it. The hooks are required otherwise your metabox won't show or save when you submit it.
To add the metabox, we create a function which uses the add_meta_box() function, and pass it the information necessary for our metabox. You can read more about add_meta_box() here.
// Add action hooks. Without these we are lost
add_action( 'admin_init', 'add_custom_metabox' );
add_action( 'save_post', 'save_custom_url' );

/**
 * Add meta box
 */
function add_custom_metabox() {
	add_meta_box( 'custom-metabox', __( 'URL & Description' ), 'url_custom_metabox', 'post', 'normal', 'high' );
}

This is adding our metabox function with the callback 'url_custom_metabox'. You can change the post type this will be added to by changing 'post' to whatever your post type you want to use it for.
4. Getting and Returning the Saved Data For Each Post
Finally, we need to have a way of displaying the information entered into the metabox fields on the frontend of the site, so we can make use of it right!
To do that, I like to just create a function that gets the post meta for me, and return the variables for each field I want as an array using get_post_meta() like this.
/**
 * Get and return the values for the URL and description
 */
function get_url_desc_box() {
	global $post;
	$urllink = get_post_meta( $post->ID, 'urllink', true );
	$urldesc = get_post_meta( $post->ID, 'urldesc', true );

	return array( $urllink, $urldesc );
}

The way you would use this in your theme is within whatever page template file, you create a variable and set it to this function. Then echo out the variable key you want to use. For example:
// get the array of data
$urlbox = get_url_desc_box();

echo $urlbox[0]; // echo out the url of a post
echo $urlbox[1]; // echo out the url description of a post

The $urlbox[0] will display the URL which can be used in the href of an anchor tag.
Here's The Entire Custom Metabox Code
You can either paste this into your functions.php file, or create a separate file within your theme directory, and use get_template_part( 'FILENAME' ); to include it in your functions file.
ID, 'urllink', true );
	$urldesc = get_post_meta( $post->ID, 'urldesc', true );

	if ( !preg_match( "/http(s?):\/\//", $urllink )) {
		$errors = 'Url not valid';
		$urllink = 'http://';
	} 

	// output invlid url message and add the http:// to the input field
	if( $errors ) { echo $errors; } ?>

	Url:

		
	Description:

		<?php if( $urldesc ) { echo $urldesc; } ?>
ID, 'urllink', $_POST['siteurl'] );
		update_post_meta( $post->ID, 'urldesc', $_POST['urldesc'] );
	}
}

/**
 * Get and return the values for the URL and description
 */
function get_url_desc_box() {
	global $post;
	$urllink = get_post_meta( $post->ID, 'urllink', true );
	$urldesc = get_post_meta( $post->ID, 'urldesc', true );

	return array( $urllink, $urldesc );
}
?>

I've been making some pretty crazy metabox lately, and with WordPress 3.0, I think we're going to see a lot more need for people to be able to create them. My metaboxes are becoming more and more complex and customizable each time I make one. It's really cool, and worth taking the time to learn.
Hope this has helped you learn somethings about doing this. Let me know if you have any questions in the comments.
Related Posts
New2Tip: Allow Visitors To Search By Category
OOPost Types: Methods Part 2 – Object Oriented WordPress 3.0 App
Making Your RSS Feeds Sexy With Custom Content In WordPress
OOPost Types: Objects Part 3 – Object Oriented WordPress 3.0 App
New2Tip: Adding A Click Highlighting Shortlink Input To Posts

[Guest Post] Stop Self-Editing While You Write And Just Write

Jared — Tue, 09 Nov 2010 13:00:36 +0000

Write Outside Your Cozy Little Comfortable Box

I recently wrote my second guest post on Comluv, my third guest post ever, and it was a post that was completely different than what I am normally known to post. Here's my first guest post over there for those who care.

It was about writing, and how to write more and self-edit what you write less. It wasn't about code, or design, or something to do with WordPress, or jQuery. Nope! It was just about writing.

I started to write this post as a sort of cross-post, aggregation of that post, to get more people to read that one, but it occurred to me that just in writing that post, it gave me the idea to talk about going outside your comfort zone in writing. That's something I definitely did, though I feel I had some strong points which I could make, it was still beyond what I'm comfortable writing about.

Don't get used to it...

I won't be doing that often, at all. But it made me realize that it can be good to sometimes step out of the box, and throw a curveball at yourself if no one else, and see what you're capable of. I'm not a professional writer, but I do feel I can write quite well, and might need white out twice to rewrite advice. I can however make words form letters, while shaking their dirty curves flirting with you all, with visual learning balls which are burning.

I used to write a lot like that, and can continue to now for a long time to come. Once I start writing like that it's very hard for me to break out of it. So forgive me.

So go try writing what you don't normally do. Write outside the box, and see what you can create with the right box. You might surprise yourself, and who knows, you may just find what you've been meant to do all along. Okay maybe not, but...

Go read my guest post!!!

New2WP Basic Sidebar Twitter Widget Plugin

Jared — Mon, 08 Nov 2010 14:30:19 +0000

You Know The Digits, So Push The Widgets

I just wrote a sidebar widget for showing Twitter updates, for some reason. Don't ask me how I got so distracted with what I was doing a couple hours ago that I managed to begin writing a sidebar widget for displaying your latest tweets but I did.

I just finished the first version of it, and figured I'd do a blog post to release it to anyone interested in using it. It's quite basic, nothing really all that fancy going on here with this widget.

Advertise on New2WP

Plugin Features:

This is a plugin that just adds a custom sidebar widget I made, for displaying your latest Tweets from Twitter. Here's what it has so far:

Show Tweets from an account on Twitter you define in the settings
Control the number of Tweets to show in the sidebar
Easily enable/disable the loading of jQuery.js. Chances are you have it already loaded on your site (possibly more than once) so this allows you to decide whether to load it or not.
Fetches the Tweet data using Ajax and JSON (cool stuff)

As of right now that's all that it really needs. I have it running over there in the sidebar down at the bottom, so you can get an idea of what it does.

I may eventually add an options page for it, so you can control some more stuff such as the styling, showing people's avatars, and making the links and stuff clickable. For now, this is good enough until I get some feedback on it at least.

Plugin Installation:

Simply download the n2wp-witter-twidget.zip file, and unzip the /n2wp-witter-twidget/ folder to your plugins directory.
Then go to your plugins page in your WP dashboard, and activate it.
Once it's activated, you go to the Widgets page of your dashboard, and add the Witter Twidget to a widgetized sidebar area which you should already have, otherwise you need to create a widgetized sidebar. Once you add it there, you can control the settings of it as you wish.

Download New2WP Witter Twidget Plugin

Let me know what you think of it in the comments

New Textmate and Coda Starter Plugins For WordPress Developers

Antonio — Sat, 23 Oct 2010 16:44:57 +0000

Announcing Two New Plugins For WP Devs

I created a plugin for Textmate and Coda to help speed up development for WordPress, and to make my life easier really. It makes adding commonly used WP snippets of code to a document I'm working on extremely easy. Currently this only exists for Textmate and Coda on Mac. Depending on the demand, there may be support for other applications in the future.

The Textmate WP Starter Plugin and The Coda WP Starter Plugin have two modes:

WP Quick: Which is a folder and file skeleton.
WP Full: Which is a full theme structure markup and base styling.

DOWNLOAD TEXTMATE WP_STARTER

DOWNLOAD CODA WP_STARTER

NOTE: These plugins are still in beta, i am sure there are errors. Let me know ( and BE NICE!) and i will fix them immediatly

Showing Posts From Multiple Custom Post Types In The Loop

Jared — Tue, 19 Oct 2010 12:00:15 +0000

How To Mix Your Custom Post Types Together

So you have a few custom post types set up in WordPress, and they work awesomely on the custom page templates you created for them, but you can't get them to all mix together based on the dates they were posted.

Or, you want to create a custom sidebar widget and you have everything done for making a custom widget, except the custom post type posts in one single list.

Or, you don't have a clue what I'm talking about.

Then keep reading....

Creating a Custom Loop with query_posts()

For displaying all your custom post types in a single page loop, for example, in your index.php file for your homepage, you need to do more than just query the posts.

In order for the pagination links to work for next_posts, previous_posts, or if you're using the wp-pagenavi plugin, you need to first set the $paged variable. Otherwise you will get a 404 error.


Then create a custom query_posts() query to query the post types, making sure to include the 'paged' argument set to the $paged variable. You can use any other $args in the query too if you want.
The query_posts() must be run before the loop is started. So be sure to put it before the code:
// query the posts of your custom post types
query_posts( array(
		'post_type' => array(
					'post',
					'custom_post_type_1',
					'custom_post_type_two',
					'custom_post_type3'
				),
				'paged' => $paged ) // for paging links to work
			);

// have some posts?
if (have_posts()) :
	while (have_posts()) : the_post(); // begin the Loop

		// make a little love

	endwhile;
endif;
?>

That's not too hard is it? The hard part is when you try to do this for your category or custom taxonomy pages. There is no custom post type archives template in WordPress, so creating working paginated taxonomy post lists is very much a pain in the ass. WP 3.1 will solve this problem. I've seen so many people asking about it, since I learned about it back in May. I know how to do it though. :P
List Custom Post Types in the Sidebar with WP_Query()
If you want to just show a list of all posts in each custom post type, maybe even including which post type the posts are next to each item, we can create a function with a custom Loop that uses WP_Query(). 
This is how you create a custom Loop that isn't the main page loop, but displayed on a page that has the main loop. I prevents any unwanted mishaps that might arise from running query_posts(). You can learn more about the difference between query_posts() and WP_Query() here if you're unclear about these functions.
Custom Post Types List Loop Function
When you make a custom query Loop that doesn't use any sort of pagination, or next_posts/prev_posts capabilities you don't need to include the $paged variable. This code should be added to your functions.php file, btw.
function list_all_posttypes() {
	global $post;
	echo '';
	rewind_posts();

	// Create a new WP_Query() object
	$wpcust = new WP_Query(
		array(
            'post_type' => array(
                'post',
                'custom_posttype_1',
                'custom_posttype_two',
                'custom_posttype3'
            ),
            'showposts' => '5' ) // or 10 etc. however many you want
        );

		// the $wpcust-> variable is used to call the Loop methods. not sure if required
        if ( $wpcust->have_posts() ):
            while( $wpcust->have_posts() ) : $wpcust->the_post();
        ?>

		
			ID );
            if ( $posttype) {
            	echo '(' . $posttype . ')'; // display what each post is in parenthesis
			} ?>
		

		';
} // end of list_all_posttypes() function

Now you can use the function list_all_posttypes() either in your register_sidebar_widget() for your custom midget, baby widget, or you can just drop the function into your sidebar.php file where you want the list of posts to show simply by calling the function. In fact, this can be used anywhere in your theme to show this list. All you have to do is call the function. I created a custom dashboard widget using something similar to this on WPHonors.com.


If you have any questions let me know in the comments below. Maybe for a future post I'll show you how to create a custom midget for your site to make use of this function. Wouldn't you want your very own midget?
Related Posts
Understanding The Difference Between query_posts and WP_Query
Part 1: Dynamic jQuery Featured Post Slider – Using Custom Loops
New2Tip: How To Include Custom Post Types In WordPress Search
OOPost Types: Objects Part 3 – Object Oriented WordPress 3.0 App
Making Your RSS Feeds Sexy With Custom Content In WordPress

New2Tip: How To Include Custom Post Types In WordPress Search

Jared — Sat, 16 Oct 2010 16:13:01 +0000

Easy Way To Add Search For Custom Post Types

With WordPress 3.0 and the new custom post types WordPress has you are unable to search the content of these using the normal WordPress search form by default.

Well now how useful is your search form when you add a new custom post type but you are unable to use the search form to find content posted to them? Luckily, it is simple enough to add custom post types to your search query so that your searches will search all post types which you choose to define for the search form to search.

This is similar to a post I wrote before on allowing visitors to search by category, only better!

Adding Custom Post Types To Your Search Query

All you need to do is create a function, which can be add to your functions.php file. This function checks if the $query variable is the search query $query->is_search passes the $query and then sets the post types which should be searched using the queried keyword you entered in the form, then returns what the $query should search within.

// Define what post types to search
function searchAll( $query ) {
	if ( $query->is_search ) {
		$query->set( 'post_type', array( 'post', 'page', 'feed', 'custom_post_type1', 'custom_post_type2', 'custom_post_type3', 'custom_post_type4' ));
	}
	return $query;
}

// The hook needed to search ALL content
add_filter( 'the_search_query', 'searchAll' );

You can also use this method to set up custom searches, like if you wanted to search JUST post_type_X or all post types, but excluding Y or Z post types and including 'feed' and 'attachment'.

For example:

function customSearch( $query ) {
	if ( $query->is_search ) {
	$query->set(
		'post_type', array( 'page', 'feed', 'attachment', 'custom_post_type_X', 'custom_post_type_Z' ));
	}
	return $query;
}
add_filter( 'the_search_query', 'customSearch' );

You can mix and match whatever you want and however. If on a specific page you want to only allow people to search a single post type all you have to do is if (is_page('page_slug')) { // call custom search function here }.

Just make sure that you add the filter to hook into the search query add_filter( 'the_search_query', 'FUNCTION_CALLBACK') otherwise it won't apply the filter and your custom search queries won't work the way you want.

It's that simple.

New2Tip: Allow Visitors To Search By Category

Jared — Thu, 22 Jul 2010 10:00:09 +0000

Changing The Form

To add the drop down select menu for categories, you simply use the wp_dropdown_categories() function with at least one parameter of show_option_none=Select category. You can also add other options too if you like.

The following code is what I use for the searchform.php here on New2WP.

Add a function

In order to hook into the search query that happens when you submit the search form you need to add this to your functions.php file.

// Add to functions.php file.
add_action('pre_get_posts', 'search_by_cat');

function search_by_cat() {
	global $wp_query;

	if (is_search()) {
                $cat = intval( $_GET['cat'] );
                $cat = ( $cat > 0  ) ? $cat : '';
                $wp_query->query_vars['cat'] = $cat;
    }
}

If you have any questions about this please post a comment below and let me know. This is something that is so easy though, that it took me just about 10 minutes to add to New2WP on all pages besides the homepage. It shouldn't be too difficult to figure out, but let me know if you need help I'm happy to help with anything.

New2Tip: Adding A Click Highlighting Shortlink Input To Posts

Jared — Tue, 20 Jul 2010 14:00:37 +0000

Using WordPress 3.0 Shortlinks

This is a quick tip for how you can add an input form field to your posts that has the posts shortlink now built into WordPress 3.0, that automatically highlights for easy copying, just like the one you see at the bottom right of every post on New2WP.

Here's an example of this

Shortlink:

First check if the function exists incase for some reason it doesn't your theme won't break then.

Then create a span element which will include the input field and if you want, the word Shortlink so that people know what it is for.

For the input value echo out the wp_get_shortlink( get_the_ID() ) functions for getting the shortlink of the current post by it's ID.

Then add an onclick event with some Javascript code that says basically, when this is clicked, the input is in focus, this should be selected.

	Shortlink:

Finally, close the if statement first opened to check if the function exists.

It's really as simple as that. You can style it with CSS if you want easily, and whatever else you can think of.

Here's The Full Code


	Shortlink:

If you have questions, don't hesitate to post a comment below as always.

Easily Add A Subscribe To Feed Reminder To The Bottom Of Your Posts

Jared — Wed, 14 Jul 2010 13:00:22 +0000

Why Would You Do It?

Once your readers are finished reading an article on your site, what's next? Subscribe to the RSS feed!! Adding a little reminder for people to subscribe to the feed once they finish reading your post is a prime location for such a reminder, and can be a great way to gain regular readers of your blog posts and visitors to your site.

You might have noticed the little reminder to subscribe at the bottom of posts on this site.

The question of how to do this was posed in a comment on another post, so I figured it would be good to write a post on it.

Keep in mind that this trick can be used to add anything you want to the bottom of your posts, not just a feed subscribe box. That I leave up to you.

The Styles Make Smiles

Here's the RSS icon image. The code for styling the box shown on this site is pretty basic, and somewhat generic. You could use it as is or alter it to fit your needs.

.rssbox {
	background: #e4e4e4 url(images/rss-feed.png) no-repeat left top;
	background-position: 20px 7px;
	border: 1px solid #121a24;
	padding:5px 10px 5px 80px;
	margin: 0px;
	font-size: 16px;
	line-height: 23px;
	color: #121a24;
	height:50px;
	width: 472px;
	overflow:hidden;
}
.rssbox a {
	color:#FF7600;
	text-decoration: none;
	font-weight:normal;
	text-shadow:0 1px 0 #FFD563!important;
}
.rssbox a:hover {
	color:#133DF2;
	text-shadow:0 1px 0 #398CFF !important;
}

A Function Or Something

This function can be added to your functions.php file. It is basically just outputting the HTML code which contains the content for my RSS box. You can show whatever you want by putting it within this function..

/* Create RSS Box at bottom of single-posts */
function postBottomBox() { ?>

	
	Get automatic updates! Subscribe to Our RSS Feed or Get Email Updates sent straight to your inbox!

Making It Dance And Sing

You can make it show on the page using two different methods. I personally like to have full control of the order and placement of things whether it's a plugin or a custom function. That is why I use the first example here. You have the ability to place it right where you want to it to display this way.

In your single.php template of your theme, add this below the function the_content() where ever you'd like it to display. This checks if the function exists, in the case that it doesn't for some reason which would break the theme, and then calls the function if it exists.

The other way you could make it display is by adding a filter to hook into the single template functions.

// Use this to add it to the bottom of the post content
add_filter( 'the_content', 'postBottomBox' );

// Use this to add it just above your comments
add_filter( 'comments_template', 'postBottomBox' );

You don't have as much control using add_filter() though. Many plugins use them to display whatever they display, most commonly, the_content().

This is used by similar post plugins for example, and I'm sure many others. The New2WP Author Box plugin uses the 'comments_template' hook, which I chose to do because at the time I wanted the author bio box to display below all other possible content added by plugins such as similar posts. For me personally and logically, seeing other similar posts would be more interesting as a reader than a box showing a bio about the post I just read. However, using the comments template hook sometimes causes problems with more complex themes.

So What To Do Now??

Well that's a no-brainer.... Subscribe to the Feed!!

Here's a list of our feeds which you may be interested in for those who are only really interested in getting updates for one type of thing and not all new posts and other updates.

Useful

Levels

Hope this has helped you customize your posts with some nifty additions to the bottom of your posts!! Feel free to comment with any questions or other thoughts below.

How To Make Two Tone CSS 3 Inset Buttons

Jared — Thu, 24 Jun 2010 13:00:12 +0000

CSS 3 Buttons Are Cool!

When I was redesigning the site I'm developing a new WordPress 3.0 app, I just happened to stumble across a simple way to create some cool buttons that can use different colors. Since the site I'm making is all HTML 5 and CSS 3 this was an added bonus. I just happened to make a change to the CSS using Firebug, and realized what could be possible just by adding a to the anchor element which had the CSS class 'button'.

By doing that, you are then able to style the span separately, and thereby creating an inset or outset look to the button.

Create the blue button

Here is the code I used to make it. Just play with the color values if you want to make different colored buttons. I suggest using Firebug to do this so you can see your changes in real-time without refreshing the page.

.button span {
box-shadow:1px 1px 2px rgba(255, 255, 255, 0.8);
-moz-box-shadow:1px 1px 2px rgba(255, 255, 255, 0.8);
-webkit-box-shadow:1px 1px 2px rgba(255, 255, 255, 0.8);
background:rgba(222, 231, 238, 0.8);
border-color:#4884D7 #4A7EFF #E0E6E5 #91B4FF;
border-style:solid;
border-width:1px;
color:#3B718E;
font-family:Palintino Linotype;
padding:6px 12px;
text-shadow:0 1px 0 #FFFFFF;
}
style.css (line 248)
.button, .button span {
-moz-border-radius:5px 5px 5px 5px;
-moz-box-shadow:1px 1px 0 rgba(255, 255, 255, 0.5);
background-image:-moz-linear-gradient(center top , #76CFFF, #3D81EE);
border:1px solid #0386FF;
display:block;
float:left;
font-family:Palintino Linotype;
font-size:14px;
font-weight:bold;
padding:5px;
text-shadow:1px 1px 0 rgba(247, 255, 255, 0.9);
}

Here is all the HTML needed

Button

It's not really anything too special, but I thought it was pretty cool, and I haven't see any CSS 3 buttons quite like this before. Most I see are done a similar way as the buttons you see at the top right of this site. Yes those are just CSS 3 buttons. Have fun!