This is a sample theme for WordPress. I have only include the neccesary files needed to match the creative and display a homepage.
To use this Theme for local development, your computer needs:
*** NOTE: the theme posted to dev is the final, compressed version, and only has files needed to rendor the theme
This is using a Gulp build system and leveraged WPGulp to kick start the WordPress workflow
Install dependances:
npm install
To run the build and start browsersync
npm start
To optimize images
gulp images
To generate WP POT translation file
gulp translate
To generate RTL stylesheets and Sourcemap
gulp stylesRTL
There are many ways to control WordPress content and I choose a few diffrent options for this theme
- Title & Subheader: This is coming from Settings > General and is displaying the 'Site Title' and Tagline
- Masthead/Footer: I made two categories "top posts/bottom posts" and assigned these to posts to determine where they show up
- Cards: This is using a custom post type "Cards" and is viewable in the admin as a seprate menu item. The title (displayed on the site) of this section is coming from the custom post type's description
- Quote Box: This was added as a "Theme setting" and can be accsesed in the in the admin's left menu (towards the bottom)
- Authors: I added some "Extra profile information" towards this bottom, on the author screen. This has fields for "company & title" and is being displayed/used in the footer post, under the image
I just imported the xy-grid, plus untilies (breakpoint mixin, rem mixin, etc). This made it quick to build responsive, flex box based, grid markup
AOS - Animate on scroll library
Light weight JS animation library ( CSS based ) for scrolling. I just used the basic for my example, but it has an extendable API and the ablity to make custom CSS animations
Another light weight JS libary carousel, with touch support. Easlie configrable and extendable, with a variatiy of options
- No JQuery - Trying to keep dependencies to a minimal
- No WP Plugins - No front end plugins are needed for the theme to work
- No Images - the only image in the theme is default-headshot.jpg and is only refrenced as a fallback image, if no image was set to a post in WP