Creating a custom post type for sharing videos in WordPress

The idea

In a recent project that I worked on, my client wanted to be able to post videos on his website as a completely separate type of content (Video Sermons) with it’s own archive page. Further requirements included ability to post upload videos and link to them, as well as post videos from outside sources such as Vimeo, YouTube, etc.

There are several methods to accomplishing the above requirements. I chose to utilize the Custom Post Type method. If you aren’t familiar at all with Custom Post Types I would suggest reading the WordPress codex page on them.

Registering the Video Post Type

The first task is to register the new post type using the register_post_type function. Here is the function I created for this purpose, I have added comments in the code to help understand what is happening.

Adding the Video Upload meta box *

Next I needed to create the meta box that would hold the video information. I wanted to provide one field where the video information was placed, both for embed code (YouTube, etc.) and for local videos (uploaded to the site). I also wanted to use the built in media upload functionality of WordPress as much as possible in order to keep the interface consistent for the client. Since I borrowed heavily from this post for the next few items it seems silly to duplicate that information. I would encourage you to read Michael’s post to understand what is going on. I have posted my code and notes on things that I changed from Michael’s post. The main difference is that his post has to do with image upload and mine has to do with video upload.

Saving the data *

Note: All of the above code is in a file called video.php and located in the theme’s lib folder.

Adding the JavaScript *

First we need to create some javascript to handle tying in our field with the media uploader. This is placed in a file named video-upload.js in the theme’s js folder.

Then we need to make sure we include the media upload js and styles

* Thanks to this post by Michael for giving me a great base from which to build.

Creating the Video Sermon archive page

To create the Video Sermon archive page, I copied the theme’s page.php code and modified the query_posts function to pull in the video post type exclusively. Here is the top of the page with all of the parts that I modified (see the comments in the code for more details)

Everything else on the page (including the loop) remained identical to the page.php file. Next I created a new page in the WordPress Admin and selected this template.

Creating the single video page

To create the single video page I copied the theme’s single.php file and made these modifications:

  • For local (uploaded) videos I needed a video player. I chose to use Flowplayer. I included an add_action call at the very top of the page for the video player so that it only is called on that page.
  • Inside the loop, I needed to get the code from the video meta box and determine whether it was a local video or not and display it appropriately based on that.

Adding Flowplayer to the theme

In order to add Flowplayer for use in the theme, I placed the downloaded Flowplayer files in a new folder (called third-party to keep it separate from other theme files) inside the theme. You can see the reference to the swf file on line 13 of the code above.

Bringing it all together in the functions.php file

First I pull in the video.php file that creates the video post type:

Then we create the function that pulls in the flowplayer javascript. (the one we called from the single video page.

Using Premium WordPress themes for client projects

Premium WordPress themes have evolved to the point where they are viable options for projects. I recently had a client approach me with the need for a revamp of their website, but they had limited resources. I suggested that they use a premium theme from Themeforest to keep their costs down while still having a site that looks professional.

After looking though several themes we decided on the Karma theme by TrueThemes. For less than $40 dollars they were able to change the site from an outdated design; static, and hard to update; to a professional looking, current design, with the easy to use WordPress backend. My client was then able to focus their budget toward the other important aspects of the site’s revamp: better content organization, video presentation, online virtual seminars, etc.

Disclosure: Some links in this post are affiliate links.

Showing the current weather on your website using MagpieRSS

The idea

I recently completed a quick project where the client wanted to have the local weather conditions displayed on his website through an RSS feed. The first hurdle I came to was finding a website that provided the feed and allowed for its use on other sites. I originally tried, but their terms of service didn’t allow commercial use. After searching for a while I came across which provides XML and RSS feeds of the current weather conditions and allows you to display them on your own website without restrictions. The only downside is that you probably won’t be able to show weather for your exact location (only from the nearest observation center). You can view locations by state at this page.

Installing MagpieRSS

It’s easy to get started with MagpieRSS. Download it from and extract it. Next, copy the extlib folder and the files:,,, and into your website’s includes directory, preferably outside the web root. Next we need to set up the PHP that uses MagpieRSS to parse the RSS feed.

The $rss variable is an array of values from the feed including the title, link back to for more details, and description. In most feeds we would have multiple items in the feed that we would want to loop through and display. This feed; however, only returns one item – and that is all we want to display. So when we call the item we insert [0] to specify the first array value.

Note: to get the code to display properly above I had to modify the link using [ instead of <.

Now that we have the format for our code we can save this file as feeder.php and put it in our includes directory. Next, we include it in our website like this:

Last, we give it a little bit of style:

I hope you find this useful. You can also see a working example. Feel free to view the source and use it in your own website.

Get Started generating PDF’s today! Part 3 – extending/reuse

Extending FPDF

If you are new to FPDF you may want to start by reading Part 1: Installation and Part 2: Playing with the options.

We can extend the core FPDF library and set up some functions that we can reuse. For example, we want to present a report in a table. The table will need column headings so that we know what each column of data represents. We could build that into the file for this one report, but say we want another report, different heading names but the same basic structure. We can either replicate the entire file from the other report and change the heading values or we can extend FPDF and create a tableHeader function that accepts an array of heading values and creates the header on the fly. This approach will save us time as we add new reports.

Now we want to use this to create a pdf. So in our index.php file we need to set up some values and generate the pdf.

There you have it, a reusable table head builder. Now you can use the same concept as above to output the table data.

Get Started generating PDF’s today! Part 2 – playing with the options

If you haven’t read part 1 of the series, you might want to start there.


Today we are going to talk about the options we have when creating a pdf with the FPDF library. We will cover:

  • Changing page orientation and size
  • Changing Font styles
  • Changing the size and style of text cells
  • The different options for saving the final product

Changing page orientation and size

When we initiate the FPDF class we can specify the page orientation, unit of measure and size. Page orientations options are: Landscape (L) and Portrait (P). Next we can set the unit of measure (used for everything except font sizes): Point (pt), Millimeter (mm), Centimeter (cm), and inch (in). To specify page size we have many options along with the ability to specify our own custom size. The options are: A3, A4, A5, Letter, and Legal.

So if we want to create a legal sized PDF in the landscape format, using millimeters as our unit of measure this is what it looks like:

Say we want a custom sized page, we need to specify the width and height in an array. The width and height values will use the specified unit of measure. Here is an example:

Our page will be 250 millimeters wide and 400 millimeters high.

Changing font styles

Next we want to set the font and its styles. According to the FPDF website the standard fonts available are: Arial, Times, Courier, Symbol, and ZapfDingbats. We will use Times for this example. Now we can set the font style, the options include: Italic (I), Bold (B), or Regular (empty string). You can also specify a combination of these styles. We will use bold. Last, we want to set the font size (always in points). For this example we will set it at 22 points.

So, our example would look like this:

Note: This can be used on a line by line basis to change the font in a pdf.

Changing the size and style of text cells

Now we need to write some text to our pdf. To do this we use the Cell function. There are a lot of options available when writing a text cell: Width, Height, text you want printed, border, where the current position should go after this cell, text alignment, whether the cell should have a background color or not, and a link for the text. For a complete list of the variables see the manual at We want to output our name in text that is centered on the page, with no border and we want the cell to go to the next line after writing our name.

So, our example would look like this:

I have found it handy to have the cell page of the manual open for reference while building my pdfs. It helps me keep the options straight.

The different options for saving the final product

We’ve got our document ready and now we need to save it. We can specify the name for the file (I have found it best to specify a name without spaces such as file_name instead of file name) and the destination of the document. We have four destinations available: Inline (I) to the browser, Download (D) with the browser, Save (F) to a local file, and return the document as a String (S).

So, our example would look like this:

Note: I have found “D” to be the most consistent option across the different browsers.

This concludes our lesson for today. I hope this helps you get started playing with the options!

We will be continuing the series soon by extending FPDF to save us time.

Read Part 3 – Extending & Reuse

Get started generating PDF’s today! Part 1 – installation


FPDF describes itself as

FPDF is a PHP class which allows to generate PDF files with pure PHP, that is to say without using the PDFlib library. F from FPDF stands for Free: you may use it for any kind of usage and modify it to suit your needs.


  1. Download the library and place it in a directory accessible by your web server

    It generally makes sense to put it in an includes directory.

  2. Include it in your web application
  3. Create the page

For more information and tutorials on building pdfs you can go to the FPDF website and reference their tutorials and the manual

We will be continuing this series soon with a closer look at our options when creating a page. Some things to look for are:

  • Changing page orientation and size
  • Changing Font styles
  • Changing the size and style of text cells
  • The different options for saving the final product

Read Part 2 – playing with the options

Miscellaneous Billing: eliminating errors & simplifying the interface


Miscellaneous Billing is used by many departments on Plymouth State’s campus to initiate charges to individuals. The charges can range from Health Services to Residence Hall Damages and are logged in an Oracle table to be accessed and processed by the Bursar.

The Problems

  1. The original system was built in Microsoft Access – having a separate application for each department. This was a maintenance nightmare.
  2. It was extremely easy to charge the wrong individual.
  3. Making adjustments/reversing charges was very complex and error prone.

Problems Solved!

  1. The original plan was to replace the Residential Life Misc Billing application with a web interface; however, when I approached ITS with the idea they asked me to write it to replace all departmental Misc Billing apps. My task was to create the User Interface (UI) that would be used across campus. Any changes that need to be made can be made in one place for all departments. Problem Solved!

  2. The Access version consisted of a form within a form. The outer form contained an alphabetical list of people and always defaulted to the first person on the list. The problem was that users often forgot to select the person they wanted and ended up billing the default person. If the mistake was noticed soon enough, the charge could be removed and re-entered for the correct person. If not, the wrong person could end up with a bill.

    I created the new interface so that the user can enter a student’s name or ID number and return the correct person (see Figure 1 below). Once the user has entered the person’s name the page returns a list of possible people with that name or ID. The user then clicks the correct person to continue the billing process (see Figure 2 below). Problem Solved!

    The search screen of the Misc Billing app
    Figure 1: The search screen of the Misc Billing app

    Figure 2: The results of the search - in this case the correct name was returned
    Figure 2: The results of the search - in this case the correct name was returned
  3. The old application only allowed the user to view one bill at a time which meant that the user had to click through each record to find the one they wanted to reverse. Also, the user had to check to see if the charge had been processed by the Bursar to determine how they needed to proceed. Problem Solved!

RD Menu: reducing report time from hours to minutes


The RD Menu generates housing reports for Residential Life staff. These reports provide a range of options from generating a complete roster of students in alpha order to finding housing information for individual students.

The Problem

The original menu was created in Microsoft Access approximately five years ago; however, many of the reports took more than 20 minutes to run and some took nearly all day. The housing coordinator found this delay especially frustrating because she depended on those reports to accurately assign student housing.

Problem Solved!

Although originally tasked with optimizing the SQL in Access to reduce report times, the minutes saved were not satisfactory enough. I suggested, as a test, to re-create a report as a web application to discover if we could reduce the time it took to generate reports more. Reports which took 15-20 minutes in Access became virtually instantaneous in the web interface. Problem Solved!

Hartman Union Building: re-design


The Hartman Union Building (HUB) website was primarily designed to provide information about student organizations, upcoming events, and facility availability. The site was designed using bright colors that varied from section to section and fancy fonts.  This gave the site a fun, energetic feel.


Over the last couple of years Plymouth State University’s Web Administrator has been unifying the design of departmental websites as well as converting them to a content management system.   When it came time to convert the HUB website, the web administrator wanted the HUB website to have a unified design, while the HUB staff wanted to maintain the unique, “fun” feel of the site.  The web administrator allowed me some leeway in the re-design but required that I use the same colors and basic layout as other department sites.

Problem Solved!

What I came up with was a slightly “grunge” header with softened lines. I call them fuzzy lines.

Picture 1: The fuzzy edged, relaxed HUB design
Picture 1: The fuzzy edged, relaxed HUB design
Picture 2: The hard-edged design of other department websites
Picture 2: The hard-edged design of other department websites

Timeclock: using FPDF to generate timesheets


Read background information on the design of the timeclock system!

Single vs. Multiple timesheets

Since each student’s timesheet is formated the same way, whether it is generated as a single timesheet or as part of multiple timesheets, I developed a class to create the timesheets.

Figure 1: A sample timesheet
Figure 1: A sample timesheet

In the class is a function called outputPDF which accepts one argument: an array of the timesheet values. Inside the function we begin creating the page.

Now that we’ve got the timesheet ready let’s create a function that determines the timesheet type.

There are a few things we want to accomplish with this function.

  • include and instantiate the fpdf library
  • Call the FPDF page numbering function and create the first page:
  • Set the page title:
  • check to see if the type is single and if so, generate the timesheet:
  • if the type isn’t single check to see if it is multiple and if so, generate the timesheets:

So all together it looks like this: