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
- Download and install Wordpress (Download link)
- Enable pretty permalinks (
Settings -> Permalinks
), select "custom structure" and use the string/%post_id%/%postname%
. - 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. - 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
- Clone this repo.
- Run
npm install
andbower install
to download the dependencies. - Configure your paths and meta data in the
config.json
file of the root directory. - Run
gulp watch
to build and start the watch task. - Navigate to the
/build
directory in your browser to test. - 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