Creating a Slider With bxslider and ACF – Part 1

Posted on: May 5th, 2014

This is going to be a quick and dirty run through of using ACF and bxslider to pull off a quick customizable content slider for your site. If you’re not sure what bxslider or ACF (Advanced Custom Fields) are, I advise you take a moment to get acquainted.

bxslider (download here)

One of my favorite minimal slider scripts, bxslider manages to pull off a sleak, responsive content slider with 204 lines of CSS and 18.9 KB of jQuery (minified). Under the WTFPL license, bxslider gives you the opportunity to manipulate, morph and mangle however you see fit. With a host of examples and options, it’s extremely easy to get bxslider up and running and into your theme in no time at all.

Advanced Custom Fields (download here)

I used to be the guy that wanted to custom code each meta box for a custom post type, but at some point it becomes unmanageable. With updates to the core and other updates affecting the meta boxes, I needed a reliable way to stay current and stay quick when creating custom post types. That’s where ACF comes in. Not only can I add meta boxes for custom post types, I can also add conditional logic by page and page template to get specific meta boxes anywhere across my site. I’m eternally grateful for the simplicity and functionality of ACF.

Pull In bxslider Files

Once you’ve downloaded bxslider, drop it into your theme in whatever structure you like then register and enqueue both the script and the style.

// register
wp_register_script( 'bones-bx', get_stylesheet_directory_uri() . '/library/bxslider/jquery.bxslider.min.js', array( 'jquery' ), '', true );
wp_register_style( 'bones-stylesheet', get_stylesheet_directory_uri() . '/library/css/style.css', array(), '', 'all' );

// aaaand enqueueueueue
wp_enqueue_script( 'bones-bx' );
wp_enqueue_style('bones-bx-style');

For each I recommend calling them before your custom files, so before your standard style.css file and before your plugins.js or scripts.js file. That will make it easy to override and initialize bxslider.

Setting Up ACF

I’ll assume that you were able to get ACF installed on your version of WordPress. Head to “Custom Fields” and “Add New Field Group.” Give it a name like Image Slider or Content Slider and add two fields, an image and a WYSIWYG.

acf

You’ll notice for the image type that you can get a return value of Image Object, Image URL, or Image ID. For our purposes I’m going to be using the Image URL only, so go ahead and select that one.

Once you’ve created the two fields (I named mine Slider Image and Slider Content), add in your Location rules. I’ve selected a Page Template equal to “Content Template” as that is what I will be adding my custom code to. You can create whatever rule groups fit with your theme.

If you’ve done everything correctly, you should see the following at the bottom of your Edit screen on a page using your Rule Group.

acf1

We’ll get into pulling in your newly created image and content into your template in part 2.

previous post: Making Yourself Indispensable next post: Creating a Slider With bxslider and ACF – Part 2