inside out – STEP 103 | Pulling Content From WordPress – Assignment
Overview
In this lesson we setup our WordPress site to include end points for the menus by installing a plugin. We position our WordPress site to act as an administrative point for our HTML5 application. From our HTML5 application we setup functionality to retrieve menus from the end points we setup and then retrieve the page content for the menu links. We explore several different jQuery functionalities that include updating the DOM and creating transition effects to give the user a greater application feel to their interactivity. We discuss the importance in creating visual feedback during the loading of the api data as well as preventing the user from making repeated calls due to believing the site is unresponsive while making the ajax calls.
Each action item has been linked to the time stamp in the lesson video to help you focus on learning rather than searching for information. Please be sure to complete each step as demonstrated in Part A & Part B videos.
Action Items to Complete
- Complete all steps completed in the video “inside out – STEP 103 | Pulling Content From WordPress – Part A”.
- 00:00 – Introduction
- 00:10 – lesson overview
- 03:29 – setting up wordpress
- 03:42 – setup of wp pages in site
- 04:10 – discuss nested pages wp plugin
- 04:15 – layout pages in specific order
- 05:22 – install wp api menus wp plugin
- 06:21 – install nested pages wp plugin
- 06:58 – setup mens in wordpress
- 08:25 – create the api menu
- 13:19 – setup dw work area & copy 102 folder
- 14:18 – trim p elements down to 3 per section
- 15:12 – begin modifing the menuBuilder() for api
- 15:58 – look at wp api end points
- 16:36 – look at api menu end point
- 18:15 – update ajax link for menu
- 20:29 – update data.menu to data.items
- 21:42 – update function from name to title
- 23:03 – comment out the recursion
- 24:00 – return to recursion for sub-menus
- 24:36 – modify item.Menus to items.children
- 25:02 – remove length condition & test object
- 25:43 – connecting menu items to pages
- 26:21 – discuss api pages end point
- 27:45 – review object_id element in json api
- 27:52 – identify page with object_id
- 28:33 – add object_id to menu links
- 28:36 – discuss data attribute
- 29:26 – test data-pgid attribute
- Complete all steps completed in the video “inside out – STEP 103 | Pulling Content From WordPress – Part B”.
- 00:00 – Introduction
- 00:40 – comment for getPage()
- 01:15 – create the getPage() function
- 01:49 – copy and reuse ajax call from init()
- 02:10 – remove code from ajax in getPage()
- 03:05 – update ajax url to pages end point
- 03:14 – add obj (pgid) to the ajax url
- 04:40 – add click eventlistner to menu links
- 09:28 – testing page api call
- 09:57 – build the pgbuild var in the getPage()
- 14:36 – add page content to getPage to display
- 16:28 – copy html into pgbuild var
- 21:09 – render pgbuild var in content div
- 22:45 – add some magic to our ui
- 23:41 – add loader div to index page
- 24:21 – add additional style to our site
- 24:50 – add web fonts
- 25:56 – add style for titlediv & loaderdiv
- 28:13 – add transitions to menu
- 30:39 – add page loading transitions
- 34:42 – lesson wrap up
- Push all the files you have created to your server and review that your work is error free and aligns to the completed work in these videos.
- Submit the url to your application (the index.html file) once you have validated your work and are confident you have completed everything. The link should look similar to the following link: http://www.inside-out-project.com/html5/step-103/ and your page should look to what you see when clicking on the example link.
please note: your assignment is to be submitted in the step folder as shown in the example above.