A Handy Boilerplate Child Theme for Serious Genesis Developers
Trestle takes a lot of the grunt work out of building sites using the Genesis Framework, providing quick and easy-to-implement solutions to common problems and repetitive tasks. We’ve taken Genesis’ rock-solid foundation, integrated mobile-first CSS, responsive navigation, a full-featured settings panel, and much more. Download. Install. Enjoy.
Time-Saving Solutions to Common Problems
Many of Trestle’s handiest features can be found in the settings panel, located on the main Genesis settings page in the dashboard. We’ve taken a bunch of functionality that we commonly use when building sites, and abstracted it out into an easy to use interface. This means less time repeating common actions (writing actions and filters, creating custom CSS, adding jQuery), and more time doing the fun stuff.
Live Customizer Theme Styling
Trestle’s general styling can be modified and previewed live on the customizer page. Customizer options include colors for body fonts, headings and page sections, custom background images, and options for custom font families.
In addition to the various sidebar/content layouts Genesis provides, Trestle gives you the option to choose between a solid layout and a more modular layout in which content areas stand out against their background.
Try toggling the layouts
Add a Logo
One of the most common tasks when developing with Genesis is adding a logo. That task just got immensely easier. Just add the URLs for your full-size and mobile logo in the Trestle settings panel.
Full Control of Post Info & Meta
Choose exactly where and when you want to display post info & meta information using Trestle’s easy checkboxes. The settings allow you to control both post info & meta for all custom post types, for both single and archive displays.
Customize Your Setup
Quickly choose the default number of post revisions, select how many footer widgets you want, and specify custom text for commonly modified site components like the mobile navigation button, read more links, and even Genesis’ navigation extras.
Custom Link Styling
Mobile-First CSS means faster load times, progressive enhancement, and a better overall mobile experience. It’s all based on Genesis 2.0’s standard CSS, so it’s rock-solid and works across all modern browsers.
Responsive Mobile Navigation Menu
At last! Trestle comes with a mobile navigation menu that’s easy to theme and modify.
Auto-Install Your Favorite Plugins
Trestle utilizes the TGM Plugin Activation Library, which allows you quickly install your favorite plugins every time you build a new site. Trestle comes populated with our most commonly used plugins (plus some bonus CSS for a few of them in style.css), however you can easily modify the list to match your personal plugin preferences:
- Open trestle/lib/admin/admin-functions.php.
- Look for the function:
- You’ll see the recommended/required plugins we’re using – simply add and remove as need be, substituting in the name and slug (the unique portion of the plugin’s URL at wordpress.org) of the plugin(s) you want to include.
- Note the
requiredkey – this indicates whether or not a plugin is labelled as required by the theme, or just recommended.
Immediately upon install, you’ll see a notice at the top of the WordPress dashboard listing all of these plugins, and providing you with a link to easily install them.
Trestle includes some handy jQuery to help expedite theming (adds special classes for external/email/pdf/doc links, first/last/parent elements, etc). You can edit this jQuery at:
Custom jQuery & CSS Integration
If you don’t want to directly modify Trestle’s CSS or jQuery files (e.g. if you want to preserve them for future diffing or if you plan on updating the theme), simply create the following two files in
/wp-content/uploads/ (which won’t be overwritten when changing/updating themes):
Trestle will automatically look for and include these files if they exist.
Custom Background Support
Provides theme support for WordPress custom background images via
Appearance > Background in the dashboard.
Trestle includes an editor stylesheet that automatically @imports your front-end stylesheet, meaning that you’ll see a more accurate rendering of your markup when using the WordPress visual editor.
Trestle takes advantage of Genesis’ built-in HTML5 capabilities, which means more semantic code, better accessibility, improved support moving forward, and much more.
Trestle is based almost entirely on existing Genesis standard code, and works seamlessly with this great framework.
Integrates Perfectly with Genesis Extender & Other Genesis Plugins
The Genesis Extender Plugin gives you some amazing powers (custom homepage layouts, realtime CSS editing, unlimited custom content areas) – and it all integrates flawlessly with Trestle (as do all your other favorite Genesis-related plugins).
Trestle integrates a super-simple
[ col ] shortcode that utilizes the default Genesis column classes and CSS (which means they resize perfectly for mobile devices). The shortcode looks like this:
[col class="one-third first no-list-margin"]
[col class="one-third no-list-margin"]
[col class="one-third no-list-margin"]
And the output looks like this:
- Item 1
- Item 2
- Item 3
- Item 4
- Item 5
- Item 6
- Item 7
- Item 8
- Item 9
There is only one attribute for the column shortcode, which is
class="". As you can see in the example, there are a few different values you’ll need to enter here:
- Column Width (e.g. one-half, one-third)
What fraction of the total width each column should take, including: one-half, one-third, one-fourth, one-fifth, one-sixth, two-fourths, two-thirds, three-sixths, three-fourths, four-sixths, and five-sixths.
- First Column Indicator (first)
You need to indicate the first column in a row by adding a value of “first” to the class attribute.
- No Margin (no-list-margin)
This class is used to indicate that <ol> and <ul> elements within the column should not have a bottom border at mobile sizes, when the columns spread to full width. This is handy if you need to split a list between two columns and don’t want to have a gap in the middle at mobile sizes. Try resizing your browser window and watch the above lists combine into one.
- Any Class You Want
In addition to the above classes, any value you add to the class attribute will automatically be assigned as a class to the column produced. This means you can include unique classes on any specific columns you need to target with CSS.
One of Trestle’s recommended/required plugins is Font Awesome Icons, which allows you to output a wide variety of font icons like this , using shortcodes like:
or inline HTML like this:
Trestle also comes packaged with an easy-to-use
[ button ] shortcode:
[button href="/trestle/" class=""]I'm a button[/button]
[button]Custom Icon [icon name="icon-fighter-jet"][/button]
- Genesis 2.0+
- (Optional) Respond.js, or some other polyfill to support media queries in older browsers (e.g. IE8). Note that Trestle includes respond.js in its required plugins list.