Skip to main content

How to display a WordPress feed in an AngularJS app

· 2 min read
Andrew Golightly

I have a landing page where I wanted to show my latest articles from a WordPress blog I have.

It turns out it’s not that hard to do.

First I created a factory to get my WordPress feeds

(function() {

"use strict";

var agApp = angular.module('agApp');

agApp.factory('WordPressFeed', function($http) {

function getLatestPosts(wpWebsite, numPosts, callback) {

var feedUrl = wpWebsite + '/feed/';

// docs for this API:
$http.jsonp('', {
params: {
v: '1.0', q: feedUrl, callback:'JSON_CALLBACK', num: numPosts
.success(function(response) {

return {
getLatestPosts: getLatestPosts



View this gist on GitHub

Then use this factory from some controller

(function() {

"use strict";

var agApp = angular.module('agApp');

agApp.controller('MainCtrl', function(WordPressFeed) {

var vm = this;

/* Get the latest articles from Go For Self */
/* ---------------------------------------- */
WordPressFeed.getLatestPosts('', 3, function(data) {
vm.wpFeed = data;


View this gist on GitHub

Then use this data in a view like this

<!-- Recent articles (using Zurb's Foundation framework) -->
<section class="row">

<h3 class="ag-section-heading"><i class="fa fa-pencil"></i> Recent articles</h3>

<ul class="medium-block-grid-3">
<li ng-repeat="wpArticle in ag.wpFeed">
<p>{{wpArticle.contentSnippet}} <a ng-href="{{}}">read more</a></p>


View this gist on GitHub

And that’s it! Pretty simple 🙂

Working demo at the bottom of this page.