Skip to content
Sample theme for WordCamp Chicago demo
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
assets
images
includes
languages
.gitignore
.jshintrc
Gruntfile.js
README.md
functions.php
gallery.php
header.php
humans.txt
package.json
screenshot.png
style.css

README.md

Refactoring WordPress PHP & jQuery code to use Backbone

Inspired by Step by Step from jQuery to Backbone, this is an example of how to take a small gallery component, primarily authored within the PHP of a WordPress theme and refactor it to render on the front-end, first with jQuery and then finally by using Backbone models and views.

  1. Our baseline: an old-fashioned PHP-heavy solution
  2. Move gallery rendering to JS): Reduce iteration within the PHP by adding data- attributes to the trigger links, and use that object's .data() to render out the featured image JS-side
  3. Get that HTML out of our JavaScript by embedding the markup back in the .php file as an inline template and using _.template to render
  4. Move the markup into an HTML partial and pre-compile the template with Grunt
  5. Refactor the jQuery used to render the featured image using a Backbone model and view
  6. Move the model and view code into separate files
  7. Refactor the remaining pure jQuery code into Backbone views

With the exception of the first step, each of those links will take you to the pull request where I walk through the code changes being made as we move from one step to the next.

You can’t perform that action at this time.