WordPress Starter Theme

Repo location: https://github.com/acegoulet/wp_starter_template

The purpose of this theme is to provide a light-weight starting point when building a custom wordpress theme.

Features

  • Basic file structure for standard WP theme
  • Sass-based
    • Files broken into helpful chunks (base, fonts, grid, layout, mixins, typography, stylesheet header, variables) all imported into style.scss.
  • Included functions include:
    • Force Login
    • Admin/login area Favicon
    • Strip inline image height and width (aids responsiveness in older browsers)
    • Reformatting ‘read more’ associated with the_excerpt()
    • Menu support
    • Feature image support
    • Custom functions for retrieving image urls
    • Hiding unneeded admin areas
    • Removing unwanted head tags and disabling xmlrpc
    • Disable front-end admin bar
    • Custom login page styles

Notes

CSS HEADER
Wordpress pulls information about the theme from comments at the top of a theme’s style.css file. Since we are using SASS this information is located in the sass/stylesheet-header.scss file. Make sure to update this information to accurately represent the projec the theme is being adapted for. Also make sure that whatever method being used to compile your SASS files does not strip out comments.

SASS
You’ll need to compile the main sass file (sass/style.scss) into style.css in the theme root directory. This can be done via an application (like CodeKit) or via the command line using something like Gulp. As noted above (see: CSS HEADER), make sure that whatever method being used to compile your SASS files does not strip out comments.

JS
The theme only enqueues one script (js/scripts-min.js). This is done in the footer.php file (screenshot). The idea is that you would compile all of your scripts, libraries, etc (excluding jquery) into one minified js file. For sites with multiple environments, the theme enqueues the minified file in only the production environment and an unminified version in staging and local environments to aid debugging.

IMAGES
Remember to update the included images in the ‘img’ folder and the theme screenshot in the theme root directory (screenshot.png). These are placeholders currently and should be updated to match the project the theme is being adapted for.

FAVICONS & APP ICONS
There are a bunch of default browser favicons and app icons included in the theme. Be sure to update these. Best resource: https://realfavicongenerator.net/

ACEIFY PLUGIN
If you are also using the Aceify plugin, you’ll want to remove the following functions from functions.php, as these are already included in the plugin:

  • Menu support
  • Feature image support
  • Hiding unneeded admin areas
  • Removing unwanted head tags and disabling xmlrpc
  • Disable front-end admin bar
  • Custom login page styles

Using the SASS Grid

This new theme contains a responsive SASS grid. It’s pretty easy to use. This also contains grid classes (.grid_1 – .grid_16) if you wish to cuse those. If you want to be more semantic with your code, you can simply include the sass mixin ab-grid() in the classes or IDs that you wish to behave like the responsive grid.

Ex: if I have a class called “.list-item” and I want it to be four columns, I can either add “.grid_4” to the markup along with the “.list-item” class, OR do the following in my SASS:

.list-item {
@include ab-grid(4);
}

Poke through the SASS files (particularly grid.scss) and if you have any questions, hit me up.