Creating a Marquee in WordPress with jQuery

with Chris Converse
please wait ...
Creating a Marquee in WordPress with jQuery
Video duration: 0s 1h 9m Intermediate Updated Nov 25, 2014


Leverage the power of WordPress and some custom jQuery to create and manage a promotional homepage marquee for your website. Chris Converse covers creating custom content types, uploading graphics, and producing an interactive, animated marquee that shows different captions on smaller screens. The exercise files and code snippets for this course are free to all members, so it's easy to recreate this project for your own WordPress site.

This course was created by Chris Converse. We're honored to host this training in our library.

Topics include:
  • Adding photos to the Media Library
  • Creating a custom post type
  • Adding custom CSS to your theme
  • Retrieving data from the custom post type
  • Injecting HTML and navigation
  • Styling the large and small marquees
  • Reordering the marquee panels
jQuery WordPress

Preview the final project

(chiming music) - [Voiceover] Hi I'm Chris Converse and in this course I'm gonna teach you how to create a responsive, download optimized promotional homepage marquee for WordPress. We're gonna start by creating a custom post type so that you, or your site editors, can create contents specifically for the marquee. We'll explore an optional free plug-in that will allow you to reorder the marquee panels in a visual a way, inside the admin area. And then we'll cover how to retrieve all of the content from these custom post types on your site's homepage. With the markup that we get from WordPress, we'll then create some custom CSS and JavaScript files to transform that HTML into an interactive animated marquee.

And lastly we'll manipulate the data for small screens, dynamically changing the caption content to fit on small screen devices. Now throughout this course I've also created some animated slides, that will visually demonstrate the manipulations that we're gonna perform in JavaScript, so that you'll fully understand what these scripts are doing. The exercise files for this course are available to all subscribers of the online training library. And just about every line of code is provided in a well organized set of code snippets. So you can simply cut and paste as you follow along. So with that, log in to WordPress and let's get started.

please wait ...