With our CMS, NuContent and also Drupal, we can create any type of list and make it manageable by anyone with a simple admin. I wanted to find the alternative in WordPress so I did some research. I found a very helpful plugin for this idea which imitates Drupal’s content types and field manager. You should be familiar with setting up a slideshow plugin and queuing up scripts in WordPress.
With WordPress the process is usually:
- Find a WordPress plugin that is typically built with a jQuery plugin that does at least half of what you need it to do
- Hack it to pieces
- Hide it from updates
A potentially easier method for the average front end developer (15-60 minutes without styling):
- Find the jQuery plugin that you actually WANT to use (not a WordPress plugin)
- Make it work in straight HTML and CSS in your WordPress theme on a specific template (index.php)
- Easily develop a way to manage the content associated with the plugin using Custom Field Suite and Custom Post Types UI – Learning how to work with Custom Post types in WordPress is strongly encouraged.
- Queue everything up in the functions file if you haven’t
This is how it works.
For this example I will show you how to create a slideshow with a “custom” admin panel in WordPress. I will use FlexSlider because the current WordPress plugins aren’t so flexible unless you’re familiar with modifying plugins, PHP, MySQL and ~1500 lines of someone else’s code. You can use any slider you want provided you understand how it works. For the most part, the end result is a repeating unordered list. Our goal is to make our admin panel loop added content into this list. You can ignore the extra fields in my example and simply attempt to loop two or three images in an unordered list before adding captions, buttons and links.
Here we have a single slide example which isn’t the best looking but, note the following fields needed to make this work:
- Image (img)
- Heading (h1)
- Caption (p or span)
- Button (a)
- Button link (href)
If you’re familiar with a slideshow plugin, all of this might be contained in a list item with a container for the caption and other elements (2-5).
Our HTML might look something like this, but needs some PHP to work.