The aim of this test is to get a simple WordPress site up and running and add a simple listing template to it. This will help demonstrate your understanding of WordPress' data structure, templating as well as a little CSS and JS.
Start by taking a local copy of this repo's contents. Either by cloning it or downloading the zip.
Then setup a local server environment through whichever method you're comfortable. It should run at least PHP7
as well as MySQL. Setup a local domain name for the site of westoak.test and set the public folder for
it to the site directory which is in the base of this repo.
If you load the domain in a browser at this point you should get an error saying that wp-blog-header.php cannot
be found. This is because WordPress and it's plugins will need to be installed via Composer. If you need to
install Composer follow their instructions and then run composer install from the root
of the project (where the composer.lock file is).
Once this is done and you reload the domain you should get an error referring to the .env file. There is a
little more configuration that needs to be done. First create a MySQL database in your local environment and
import the contents of db.sql into that. Duplicate the env.example file and rename it to .env. Then update
the variables within it. WP_URL should reflect the domain you setup. DB_NAME should be the database you
created. DB_USER, DB_PASSWORD and DB_HOST should be your local MySQL credentials.
Loading the domain should then show content, but none of the assets will be showing. You'll need to download
the front-end dependencies and run the build process. If you you don't have Yarn installed you'll need to
follow their instructions to do so. Then run yarn to install
the dependencies. Running yarn build will then build the front-end assets and loading the domain should show
the homepage of the site.
You will be able to login to the site at westoak.test/wordpress/wp-admin with
the username of test and a password of test.
All development should happen in the theme directory, which is found at site/content/themes/wordpress-test.
Asset updates should be done in the assets folder within. The built folder is generated by the build process and
changes within will be lost.
For development we'd recommend running yarn start which will watch assets
and compile on change. It will also start BrowserSync which hotloads CSS changes and can be accessed at localhost:3000.
The West Oak Hotel website is currently very simple. It has a homepage, a content page for The Jolly Bar and a content page for West Oak Deli.
We'd like you to add a listing page of meals to the site. You'll first need to register a post type called meal and
an associated taxonomy called meal-type. Content and assets for these are already in the database so they should show up
when registered.
We would like you to create a listing page for meals that satisfies these requirements:
- The listings should be styled as per the reference images.
- The listings should be ordered alphabetically by title.
- The listings should show 3 per-page and be paginated.
- The listings should be filterable by Meal Type links shown under the title.
- (For bonus points) filtering and pagination of the listing should be taken over by JS and happen without a page load.
Reference images:
- Homepage
- Meals listing
- Meals listing - page 2
- Meals listing - filtered by vegan meal type
- Meals listing - small screen size
The build task will compile SCSS files, with any file in the root of the styles directory used as a source. The Include Media library is included to help with defining breakpoints. The files in the project follow a BEM-like syntax, but we're really just looking for you to create some well-crafted components. It also runs Autoprefixer so you don't need to worry about vendor prefixing.
This build task will likewise process any file in the root of the scripts directory as a source. It will be run through Webpack and Babel, so files will be modularised and ES2015 features like native imports and classes are supported.
Your work can be returned by zipping up the folder and sending it back through to us. We'd recommend removing the .env file
first since it has local environment credentials in it. We'd also recommend deleting dependencies and built files; like vendor, node_modules,
site/wordpress, site/content/plugins and site/content/themes/wordpress-test/built. This will cut down on the file size.