Tutorial Post Type

In order to show off the Script Manager, I wanted to create some tutorials on using script manager. But, I did not want to list them in with the standard posts. The only solution was to create a new post type. In this tutorial, I will show you how to create the Tutorial post type and display a summary page of links to the different tutorials.

New Post Type

A great feature of WordPress is the ability to make new types of posts. If you look into it, all pages, posts, nav menus, etc. are really the same thing in the database for WordPress. Therefore, it is really easy to create a new type.

First, you need to download the icon for the Tutorial post type to be used on the Admin screen. You can get it here:

Just download this image and upload it to your WordPress site. Remember to get the address for where WordPress stores this for inserting into the next script.

Next, go to the WPPHP tab in Script Manager and create a WPPHP script called ‘tutorialposttype’. If you are not sure about how to do this, please refer to the Documentation for Script Manager. Next, add the following code to that script. This code simply creates a new post type called ‘tutorials’:

//
// This is for registering the tutorial post type.
//
$result = register_post_type('tutorials',array(
   'public'=> true,
   'supports' => array( 'title',
                        'editor',
                        'author',
                        'thumbnail',
                        'excerpt',
                        'trackbacks',
                        'custom-fields',
                        'comments',
                        'revisions'
   ),
   'query_var' => 'Tutorials',
   'rewrite' => array(
      'slug' => 'Tutorial',
      'with_front' => false,
   ),
   'labels' => array(
      'name' => 'Tutorials',
      'singular_name' => 'Tutorial',
      'add_new' => 'Add New Tutorial',
      'add_new_item' => 'Add New Tutorial',
      'edit_item' => 'Edit Tutorial',
      'new_item' => 'New Tutorial',
      'view_item' => 'View Tutorial',
      'search_items' => 'Search Tutorials',
      'not_found' => 'Tutorial not found',
      'not_found_in_trash' => 'No Tutorials are in the Trash'
   ),
   'taxonomies' => array( 'post_tag', 'category' ),
   'has_archive' => true,
   'menu_icon' => 'http://www.customct.com/wp-content/uploads/2012/03/tutorial1.png'
));

To create a new post type, you simply use a single WordPress function call ‘register_post_type’. That one function really does a lot of work. The required parameters to the function is a string with the name of the new post type and an array of data. The data array is where we specify all the functionality that the new post type will have.

This tutorial is not designed to be an exhaustive description of this function and the data array. For more information about this function, please refer to the WordPress Codex for register_post_type.

A description of each section that we will use is as follows:

public
If you want the users to be able to search these post types, you have to make them public with this flag. It is a boolean.
supports
These are the types of data that your post type will support. For the Tutorial post type, we listed title, editor, author, thumbnail, excerpt, trackbacks, custom-fields, comments, and revisions. This is pretty much every ability that is available for a post.
query_var
This is a unique global variable that will contain the query for this post type.
labels
This is a large array of strings to use for different areas when talking about this post type. You will want to use the ‘__()’ function on strings that you plan to translate. We are not coding for translation in this example, but you can very easily add this yourself.
taxonomies
This is a very important area. This is where you list the taxonomies that this post type will use. If left blank, no taxonomies will be usable with this post type. I have set up the post tags taxonomy to tag the different things that can be used in the tutorial (ie: PHP, JavaScript, etc). I also set the category taxonomy to enable different types of tutorials based on category. All of the tutorials for the Script Manager has the taxonomy category of ‘script-manager’.
has_archives
A Boolean that determines if these post types are to have archives. Since we most likely would like to list archives of tutorials in the sidebar, we set this Boolean to ‘true’.
menu_icon
This is where you put the path to the menu icon for this post type. If no icon is given, then the menu will have a blank area. Since that is not user-friendly, you should supply the proper path to a nice icon. If you have a better one that you made, use it instead.

Now that we have the script for creating the tutorial post type, we need to run it in WordPress each time WordPress sends a page to a viewer. The best way to do this is with a WordPress Action. Go to the ‘Action’ tab in Script Manager, click ‘New’ for a new Action, then supply the name ‘init’. After you click the ‘New’ button under the new name, you will see the script under the Action tab. This new Action will be ran each time WordPress is serving up a page. This will happen after all the plugins, but before the creation of the header for the page. In this script, click the ‘Insert Code’ button in the editor, select ‘WPPHP’, and then select the name of the script. Your script should look like this:

[CodeInsert lang='WPPHP' name='tutorialposttype' param='']

Now, when you go to the admin screen, you should see the new tutorial post type menu. This menu allows you to view all tutorial post types, add a new one, or look at and add new tags. The tags are important for classifying what product or program that particular tutorial is about. Since you can have more than one tag per tutorial, one tutorial can be used with multiple products.

Now, you need to just create some tutorials. You do this just like you would for the post. Make sure you attach the correct category for the tutorial and include a featured image. The featured image will be displayed with the tutorial name and excerpt on the tutorial list page.

Tutorial List

Once you have created some tutorials, we now need to display them in tutorial list page so people can find them. To create the page, we first need a PHP script that will generate the tutorial list from a SQL query. Therefore, create a new WPPHP script with the name ‘TutorialList’ and place in it the following code:

//
//Query tutorials from the database.
//

$loop = new WP_Query( array(
   'post_type' => 'tutorials',
   'orderby' => 'date',
   'order' => 'DESC',
   'posts_per_page' => 100,
   'post_status' => 'publish',
   'category_name' => $list
));

//
// Check if any tutorials were returned.
//
if ( $loop->have_posts() ) {
   //
   // Loop through the tutorials (The Loop).
   //
   while ( $loop->have_posts() ) {
      //
      // Get the post contents into the class variable.
      //
      $loop->the_post();

      //
      // Open the div for tutorial class.
      //
      echo '
'; // // Insert the thumbnail for the tutorial with it linking to the full // tutorial as well. // echo '
'; // // Display the Tutorial title. // the_title('', '', true); // // Display the excerpt for the tutorial. // echo '

'; echo get_the_excerpt(); echo "

"; } } else { // // If no tutorials are found. // echo '

No Tutorials were found.'; }

The first thing the script does is query the database using wp_query. This function starts the ‘Loop’ for cycling through all posts that match the given criteria. Here, we are looking for posts with the Tutorial type, a tag supplied by the variable $list, it will be ordered date to show the newest tutorials first, and all of the posts that meet this criteria will be given. The $list variable will be filled by the calling of the function inside the page. Therefore, you can use the exact same function for every tag type. That allows us to re-use code!

We start the loop by making sure that we have some tutorial posts to show. Notice, we find out everything we need to know about the database query from the $loop variable we received from the query. If we don’t have any posts, then just say ‘No Tutorial were found.’ After the check, we start looping through the posts with a while loop. While we have some posts, we have to get the post into the global variables for the helper functions to work. That is accomplished by ‘$loop->post();’ call.

Now, to formatting the tutorials on the page. We start by setting the div for the tutorial to sit in. This is to set off the rest of the HTML code from what has already been given. It also sets an ID name for referring to in the CSS formatting script. If the tutorial has a featured image, create it next with an anchor to the actual tutorial. Please notice that we retrieve an http address for the full tutorial by calling get_permalink() ‘Loop’ helper function. It is called a ‘Loop’ helper function because it is one of the functions that is only available within the query set up with the wp_query() function. Next, we get the title of the Tutorial. We get the title from the WordPress ‘Loop’ helper function ‘the_title()’. The ‘the_title()’ function accepts two strings: what to place before the title, and what to place after the title.

With the title in place, we just need the content to describe the tutorial. I wrapped the contents inside of a p tag with the class ‘Tutorial_excerpt’. With this class, it is easy to set any type of formatting that we want. We get the content for this excerpt of the tutorial with the function ‘get_the_excerpt()’. This is another of the WordPress ‘Loop’ helper functions. After that, just close out the p and div tags. I also put in a div that clears both sides. That way, if the feature picture and the excerpt are not the same size, the next tutorial will not get formatted inside of the area for this tutorial. That is all we need for creating the tutorial page.

CSS code

But, now we need to make it look good. Create a CSS script named ‘tutorial’ and place the following code:

.tutorial_excerpt {
   margin-left: 20px;
}

.tutorial_thumbnail {
   float:    left;
}

.tutorial_wrap {
   margin-bottom:    50px;
   float:            left;
}

.tutorial_div {
}

img.wp-post-image {
      -moz-border-radius: 15px;
      border-radius: 15px;
      box-shadow: 10px 10px 5px gray;
}

You can change this any way you want to get the look you need. This formatting is all that I needed for this site.

Putting it all Together

Now, create a page for displaying the tutorials. In that page, place the following code:

[CodeInsert lang='CSS' name='tutorial' param='']
[CodeInsert lang='WPPHP' name='TutorialList' param='$list="Script Manager";']

That is it! When this page is viewed, it will list each tutorial that you have with its featured image.

You will notice that we have the param parameter set to ‘$list=”Script Manager”;’. That sets what category of tutorials that will be displayed. We have it set here to show only tutorials about Script Manager. If you have other categories, you can set them here to display that instead. Code re-use is a great feature.

Conclusion

There are many other ways you can use this code. Have fun experimenting!

comments powered by Disqus