Skip to content
A bare-bones AngularJS blog app designed to work with the Wordpress JSON REST API.
JavaScript HTML CSS PHP ApacheConf
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.
src
.gitattributes :octocat: Added .gitattributes & .gitignore files Mar 19, 2015
.gitignore
README.md
bower.json
config.json
gulpfile.js
package.json Fix minification error Mar 26, 2015

README.md

angular-wordpress-seed

A bare-bones AngularJS blog app designed to work with the Wordpress JSON REST API.

Demo

http://www.michaelbromley.co.uk/experiments/angular-wordpress-seed/

Setting Up Wordpress

  1. Download and install Wordpress (Download link)
  2. Enable pretty permalinks (Settings -> Permalinks), select "custom structure" and use the string /%post_id%/%postname%.
  3. Install the JSON REST API (WP-API) plugin. Easiest way is to use the Plugins -> Add New feature of the Wordpress admin interface. Manual install instructions can be found on the WP-API repo.
  4. By default, the AngularJS service that communicates with Wordpress will look for posts with a category of "post". Additionally, posts which are also in the category "featured" will appear on the home page. These categories will therefore need to be set up.

Setting Up The Client

  1. Clone this repo.
  2. Run npm install and bower install to download the dependencies.
  3. Configure your paths and meta data in the config.json file of the root directory.
  4. Run gulp watch to build and start the watch task.
  5. Navigate to the /build directory in your browser to test.
  6. Upload the contents of /dist to your production server.

Developing

Here is an outline of the folder structure:

./src
   |- app               // The Angular app itself.
   |   |- about         // The various sections are in their
   |   |- blog          // own folders, and the `common` folder
   |   |- common        // houses any shared components & services
   |   |- home
   |
   |- assets            // Any static assets such as images and icon fonts.
   |- less              // All styling for the app. Each section has its own
                        // .less file, which are imported into the main.less file.

./build                 // dev build created when Gulp is run
./dist                  // minified, concatenated distribution build created by Gulp.

Extras

  • Simple, responsive CSS based on the Pure CSS framework.
  • A couple of custom directives are included for simple pagination of blog posts and a revealing search input.
  • Built-in support for handling search-engine and social-media crawlers based on this technique

License

MIT

You can’t perform that action at this time.