Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
A simple Backbone WordPress Example. Using JSON API plugin. (
* {
border: 0;
margin: 0;
outline: 0;
padding: 0;
font-size: 14px;
font-family: Verdana;
html, body {
height: 100%;
width: 100%;
h1 {
font-size: 16px;
margin-bottom: 15px;
h2 {
font-size: 14px;
margin-bottom: 15px;
p {
margin-bottom: 15px;
#post-list {
padding: 20px;
list-style: none;
.single-post {
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: 1px solid #ccc;
var PostItem = Backbone.Model.extend({});
var PostList = Backbone.Collection.extend({
model: PostItem,
url: '',
parse: function (data) {
var parsedData = [];
//This is all the post data returned by the API call above.
$(data.posts).each(function () {
var id =,
type = this.type,
slug = this.slug,
url = this.url,
status = this.status,
title = this.title,
title_plain = this.title_plain,
content = this.content,
excerpt = this.excerpt,
date =,
modified = this.modified,
categories = this.categories,
tags = this.tags,
author =,
comments = this.comments,
attachments = this.attachments,
comment_count = this.comment_count,
comment_status = this.comment_status,
custom_fields = this.custom_fields;
id: id,
type: type,
slug: slug,
url: url,
status: status,
title: title,
title_plain: title_plain,
content: content,
excerpt: excerpt,
date: date,
modified: modified,
categories: categories,
tags: tags,
author: author,
comments: comments,
attachments: attachments,
comment_count: comment_count,
comment_status: comment_status,
custom_fields: custom_fields
return parsedData;
var PostListView = Backbone.View.extend({
el: '#post-list',
initialize: function() {
this.listenTo(this.collection, 'sync', this.render);
render: function() {
this.collection.each(this.addSinglePost, this);
return this;
addSinglePost: function(singlePost) {
var view = new PostSingleView({
model: singlePost.attributes
var PostSingleView = Backbone.View.extend({
tagName: 'li',
className: 'single-post',
template: _.template($('#single-post').html()),
render: function() {
return this;
<!DOCTYPE html>
<meta charset="utf-8" />
<title>Simple Backbone WordPress Example</title>
<link rel="stylesheet" href="base.css">
<ul id="post-list"></ul>
<script type="text/template" id="single-post">
<div id="post-<%= id %>">
<h1><%= title %></h1>
<p>Date: <%= date %></p>
<p><%= content %></p>
<!-- Other data you may want to use. -->
<!--<p>Comments: <%= comment_count %></p>-->
<!--<p><%= type %></p>-->
<!--<p><%= slug %></p>
<!--<p><%= url %></p>
<!--<p><%= status %></p>-->
<!--<p><%= title_plain %></p>-->
<!--<p><%= excerpt %></p>-->
<!--<p><%= modified %></p>-->
<!--<p><%= categories %></p>-->
<!--<p><%= tags %></p>-->
<!--<p><%= author %></p>-->
<!--<p><%= comments %></p>-->
<!--<p><%= attachments %></p>-->
<!--<p><%= comment_status %></p>-->
<!--<p><%= custom_fields %></p>-->
<!-- Scripts from CDN JS -->
<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>
<!-- Local Scripts -->
<script type="text/javascript" src="postItem.js"></script>
<script type="text/javascript" src="postList.js"></script>
<script type="text/javascript" src="postListView.js"></script>
<script type="text/javascript" src="postSingleView.js"></script>
<!-- We use $(document).ready() because we are using scripts from CDN JS -->
<script type="text/javascript">
$(document).ready(function() {
var postList = new PostList();
this.postListView = new PostListView({
collection: postList
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment