Stars: 119
Forks: 24
Pull Requests: 2
Issues: 6
Watchers: 21
Last Updated: 2023-07-10 19:52:51
This is a child theme for GeneratePress for use in jumpstarting more customized development.
License:
Languages: CSS, PHP, JavaScript
This is a child theme for the GeneratePress WordPress theme. I found myself using the same conventions over and over, so I thought it would be best standardize and include them here.
If you've never heard of GeneratePress, it's a solid, flexible, and lightweight "framework" theme that allows developers to get the most common components up and running quickly. It also includes lots of hooks and filters to help customize and extend.
GeneratePress itself is free, but I highly recommend the premium add-ons. It's easily money well spent.
I've posted an overview video on YouTube: https://youtu.be/sDia_U0fNyU (it's about 35 minutes)
I've tried to be thorough with comments at the top of each file, but here's the gist of it.
First, there is base.css
within the css
folder, and just as it's named, its only purpose is to provide some "base" styles not already included in GeneratePress. Much of it is pulled from Basscss, but I've modified and added here and there to make it more in line with GeneratePress styling.
Secondly, there is also gutenberg.css
where I've decided to place all Gutenberg-specific styling. You may easily inlcude these in the main style.css
file, but I prefer to keep them separate and use a plugin like Autoptimize to merge them all together at launch.
GeneratePress implements Unsemantic for its layout styling. The additional default styling is on Github.
The style.css
file is where I include all of my custom styling. I have not included any preprocessor setup, so feel free to rig up whatever you prefer.
NOTE: This all now happens automagically with the release GeneratePress 3.1. Thank you, Tom and team!
Any custom colors added to the $gpc_theme_colors
array in inc/colors.php
will now be added as both CSS properties (like variables) and WordPress color classes (i.e. has-dark-gray-color
). Let's say you add a custom color called "Dark Gray." The CSS will look something like this:
:root {
--dark-gray:#666666;
}
.has-dark-gray-color,
.wp-block-button__link.has-text-color.has-dark-gray-color {
color:#666666;
}
.has-dark-gray-background-color {
background-color:#666666;
}
This all happens in inc/styles.php
. Outlined button classes are also added based on the button colors assigned in GeneratePress:
.button.button-outline,
.button.button-outline:visited,
.woocommerce .button.button-outline,
.woocommerce .button.button-outline:visited {
border-color:#3580b2;
color:#3580b2;
}
.button.button-outline:hover,
.button.button-outline:focus,
.woocommerce .button.button-outline:hover,
.woocommerce .button.button-outline:focus {
border-color:#3f3f3f;
color:#3f3f3f;
}
A few small animations classes are now included in styles.css
that let you fade in elements in a few different ways. You can even use the "Advanced > CSS Classes" field in the WordPress editor. For example:
fade-in prep-animation
scroll-fade-in-bottom prep-scroll-animation
If you're fading in multiple items, you may want them to fade in one at a time. The you can use the delay-
classes. Like so:
fade-in-right delay-250 prep-animation
Check out the ANIMATIONS portion of styles.css
to learn more.
Update: The scroll-fade-in
classes will now also work if an element is already in within the viewport. If it is NOT within the viewport, the animation will wait until it is to play. The scripts will check for animations on both scroll and page load events. Technically, you could use the scroll-fade-in
classes for everything and they will work.
No longer requires jQuery! Only one JavaScript file is present, js/scripts.js
, for all of my javascript goodies. As of now it only includes some stuff to make the animation CSS classes work.
The functions.php
file and everything within the inc
folder go together. You'll find the usual within functions.php
, but the inc
folder includes some optional files that can be "required" as needed.
It will probably be easiest to check the comments in each file to find out what's going on, but basically, it's:
advanced-custom-fields.php
: Helpers for Google Maps and Gutenberg blocks in Advanced Custom Fieldsbreadcrumbs.php
: Add a simple visual breadcrumb trail using hooks (Note that this does not add stuctured data — I recommend a plugin like SEO Framework for that)colors.php
: cpt-output-custom.php
: Tells custom post types and taxonomies to use specified template partials (stored within partials
)cpt-output-reset.php
: dashboard-widgets.php
: Where my dashboard widgets livefonts.php
: generateblocks.php
: NEW! You can now set defaults for GenerateBlocks! This file currently contains the code to sync up GenerateBlocks' button styling with GeneratePress, but you can do more. For all available options, take a look at the default settings in GenerateBlocks.generatepress.php
: Some customizations for GeneratePress. I've updated some things here for GP 2.0.helper-functions.php
: Home for any helpful functions that need to be accessible from anywhere in the child themeimage-sizes.php
: Optional custom image sizesoptimizations.php
: Some stuff to make our site lean and meanshortcodes.php
: Where my shortcodes livestyles.php
: inc/colors.php
to generate custom color properties and standard WP color classes automatically.sub-menu-widget.php
: Creates a contextual sub menu widget that pulls from the specified menu theme location. Defaults to primary
.sub-menu.php
: Function for adding contextual sub menus. Used by sub-menu-widget.php
.users.php
: Currently defines what the admin looks like for the editor
and shop_manager
roles. Requires the Members plugin by Justin Tadlock.widgets.php
: Easily hide unwanted widgets.woocommerce.php
: Customizations, if necessary, for WooCommerce.wp-show-posts.php
: Customizations, if necessary, for WP Show Posts. This currently only contains a filter for removing all links for occasions where you only require a list (but not links, obviously).Within partials
you'll find a couple of sample template files for setting up a custom layout for custom post types. I prefer this method (for now, anyway) instead of the template hierarchy convention so that my template files won't necessarily require tweaking as the result of a theme update. This may be dumb, so I'll revisit if that's the case.
These partials are called from within inc/cpt-custom-output.php
and sometimes inc/shortcodes.php
.
The template-parts
folder is much like the partials
folder, but it's more organized. I now try to use this folder to organize all of my Gutenberg block templates and shortcode templates.
I've included an Affinity Designer file to create the screenshot.png
for the child theme. Of course you can use whatever you like to make your 1200x900 PNG or JPEG file to suit your needs.
Amazing new blocks plugin from the GeneratePress guys. If you like page builders, you need to at least give this a try. Check out this introductory video and download GenerateBlocks now.
To enable the settings I have in place for the Editor role, all that currently needs to be done is to enable the "Edit Theme Options" under "Appearance" for the Editor role (start by looking under Users > Roles in WordPress). This will enable Menus and Widgets for Editors in WordPress.
(NOTE: I'm phasing this out thanks to Gutenberg blocks.) Still a good plugin, but GenerateBlocks is far better.