Genesis Child Theme Design Snippets

Below is a growing list of design tips for WordPress (and more specifically the Genesis Framework). I’ve provided several snippets as well. These tips and snippets are broken into 5 sections:

WordPress Options ↓
Genesis Options ↓
HTML Snippets ↓
CSS Snippets ↓
HTML and CSS Snippet Combos ↓

Let’s begin.

WORDPRESS OPTIONS

WordPress comes with a lot of built-in design options. Most of these are obvious and well known, but this is what gets overlooked.

#1 Special Characters (e.g. ‘›’, ‘»’, ‘〉’ etc.)

With the rise of touch screens came the rise of the Guillemet (or arrow if you prefer). This makes links unmistakably obvious (which is really good for mobile and other touch screens). Add these characters to buttons or other appropriate links. I prefer the single arrow, as most popular apps seem to be adopting it’s use over the double arrow. You can add special characters by selecting the Ω icon in your page editor.

#2 CSS Classes For Menus

WordPress allows you to mark any menu items as “highlighted”, “lowlighted” or any other CSS class that has been added to your Child Themes CSS file. Notice our sample. The menu item “Free Audit” has been marked as highlighted and therefore displays an outline around the menu item. This is done by following three simple steps:

Select “Screen Options” while in the menu tab of the WordPress dashboard.
Select display CSS Classes
Fill in the CSS Classes text field with the desired CSS Class.

GENESIS FRAMEWORK OPTIONS

The Genesis Framework comes with a few built-in design options of it’s own. The biggest ones are picking your page layout, adding coloumns and adding tables.

#3 Picking Your Layout

You can choose your “Layout Settings” easily. Within your dashboard visit the page you’d like to edit. Scroll down and below the “Theme SEO Settings” area you’ll find the “Layout Settings”. Pick your layout.

#4 Adding Columns in Genesis

Adding columns in Genesis is easy too : ) You can use the html below to add two columns of text.Use this code to add three columns of text.And four.Six.

#5 Adding Tables in Genesis

You can use the sample html below to add a table to a page or post.

HTML SNIPPETS

#6 Adding Jump Links

There are two snippets of HTML you will need to create a jump link:

The Link Tag: First you need to add the link. This is like any other link but you add a pound character (#) and the jump link destination name (e.g. #JumpLinkDestinationName) at the end of the URL. For example if you want to link further down your pricing page the URL you would use for your link would be “http://www.YourDomain.com/Pricing-Page/#JumpLinkDestinationName
The Destination Tag: The second part of a jump link is adding the destination tag. This should be added in the html exactly where you want the link to jump to. The destination tag is <a name=”JumpLinkDestinationName”></a>

Of course, change the “JumpLinkDestinationName” to any name you’d like for both the link and the destination tag.

#7 Boxes and Background Colors

Adding background color to your text is important for some content (e.g. pricing boxes). Here is an example below:

Here is some text.

#8 The Fastest Share Buttons Possible

Below is a view of and the html for the fastest sharing buttons possible. Just switch out the text of each share button with the appropriate link to share your site. You can quickly get the links you need at Simple Share Buttons.

#9 Three Simple Pricing Boxes

With A Tagline That Emphasizes Your Commitment To Simple Transparent Pricing

Little

$10

Feature 1

Feature 2

Feature 3

Feature 4

Big

$20

Feature 1

Feature 2

Feature 3

Feature 4

Bigger

$30

Feature 1

Feature 2

Feature 3

Feature 4

↓↓↓ HTML BEGINS ↓↓↓

&nbsp;
<h2 style="text-align: center;">#9 Three Simple Pricing Boxes</h2>
<p style="text-align: center;">With A Tagline That Emphasizes Your Commitment To Simple Transparent Pricing</p>

<div class="one-third first">
<div style="background-color: #7994aa; margin: 30px 0px 0px; padding: 20px 10px 10px; border: solid #554b47 0px;">
<h1 style="text-align: center;"><span style="color: #ffffff;">Little</span></h1>
</div>
<div style="background-color: #ffffff; margin: 0px; padding: 29px; border: solid #7994aa 3px;">
<h6 style="text-align: center;">$10</h6>
<div style="text-align: center;">Feature 1</div>
<div style="text-align: center;">Feature 2</div>
<div style="text-align: center;">Feature 3</div>
<div style="text-align: center;">Feature 4</div>
&nbsp;
<div style="text-align: center;"><a class="button" href="https://solidstratagems.recurly.com/subscribe/good-roi">Sign Up Now</a></div>
</div>
</div>
<div class="one-third">
<div style="background-color: #7994aa; margin: 30px 0px 0px; padding: 20px 10px 10px; border: solid #554b47 0px;">
<h1 style="text-align: center;"><span style="color: #ffffff;">Big</span></h1>
</div>
<div style="background-color: #ffffff; margin: 0px; padding: 29px; border: solid #7994aa 3px;">
<h6 style="text-align: center;">$20</h6>
<div style="text-align: center;">Feature 1</div>
<div style="text-align: center;">Feature 2</div>
<div style="text-align: center;">Feature 3</div>
<div style="text-align: center;">Feature 4</div>
&nbsp;
<div style="text-align: center;"><a class="button" href="https://solidstratagems.recurly.com/subscribe/good-roi">Sign Up Now</a></div>
</div>
</div>
<div class="one-third">
<div style="background-color: #7994aa; margin: 30px 0px 0px; padding: 20px 10px 10px; border: solid #554b47 0px;">
<h1 style="text-align: center;"><span style="color: #ffffff;">Bigger</span></h1>
</div>
<div style="background-color: #ffffff; margin: 0px; padding: 29px; border: solid #7994aa 3px;">
<h6 style="text-align: center;">$30</h6>
<div style="text-align: center;">Feature 1</div>
<div style="text-align: center;">Feature 2</div>
<div style="text-align: center;">Feature 3</div>
<div style="text-align: center;">Feature 4</div>
&nbsp;
<div style="text-align: center;"><a class="button" href="https://solidstratagems.recurly.com/subscribe/good-roi">Sign Up Now</a></div>
</div>
</div>
&nbsp;