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:

1. WordPress Options ↓
2. Genesis Options ↓
3. HTML Snippets ↓
4. CSS Snippets ↓
5. 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:

1. Select “Screen Options” while in the menu tab of the WordPress dashboard.
2. Select display CSS Classes
3. 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:

1. 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
2. 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:

#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

↓↓↓ HTML BEGINS ↓↓↓

 
<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;

↑↑↑ HTML ENDS ↑↑↑

#10 A Three Column Section For 6 Features or Services

A Tagline That Gives Your Services or Features That Extra Ooomph.

↓↓↓ HTML BEGINS ↓↓↓

 
<h2 style="text-align: center;">#9 A Three Column Section For 6 Features or Services</h2>
<p style="text-align: center;">A Tagline That Gives Your Services or Features That Extra Ooomph.</p>
&nbsp;
<div class="one-third first">
<h3>Service #1</h3>
Here is some really good info about our service. This service is special because of our unique approach. Call us to learn more.

</div>
<div class="one-third">
<h3>Service #2</h3>
Here is some really good info about our service. This service is special because of our unique approach. Call us to learn more.

</div>
<div class="one-third">
<h3>Service #3</h3>
Here is some really good info about our service. This service is special because of our unique approach. Call us to learn more.

</div>
<div class="one-third first">
<h3>Service #4</h3>
Here is some really good info about our service. This service is special because of our unique approach. Call us to learn more.

</div>
<div class="one-third">
<h3>Service #5</h3>
Here is some really good info about our service. This service is special because of our unique approach. Call us to learn more.

</div>
<div class="one-third">
<h3>Service #6</h3>
Here is some really good info about our service. This service is special because of our unique approach. Call us to learn more.

</div>
&nbsp;

↑↑↑ HTML ENDS ↑↑↑

#11 Font Size, Weight, and Line Height

Here’s some paragraph text with a 24px font size, 400 font weight, and 36px line height.

↓↓↓ HTML BEGINS ↓↓↓

<p style="font-size: 24px; font-weight: 400; line-height: 36px;">Here's some paragraph text with a 24px font size, 400 font weight, and 36px line height.</p>

↑↑↑ HTML ENDS ↑↑↑

#12 Service Area

Including Counties in Bold and Cities Without Extra Font Weight

↓↓↓ HTML BEGINS ↓↓↓

 
<h2 style="text-align: center;">#11 Service Area</h2>
<p style="text-align: center;">Including Counties in Bold and Cities Without Extra Font Weight</p>
&nbsp;
<div class="one-fourth first" style="text-align: center;"><strong>County</strong>
City, ST
City, ST
<strong>County</strong>
City, ST
City, ST
City, ST
City, ST
City, ST</div>
<div class="one-fourth" style="text-align: center;"><strong>County</strong>
City, ST
City, ST
<strong>County</strong>
City, ST
City, ST
City, ST
City, ST
City, ST</div>
<div class="one-fourth" style="text-align: center;"><strong>County</strong>
City, ST
City, ST
<strong>County</strong>
City, ST
City, ST
City, ST
City, ST
City, ST</div>
<div class="one-fourth" style="text-align: center;"><strong>County</strong>
City, ST
City, ST
<strong>County</strong>
City, ST
City, ST
City, ST
City, ST
City, ST</div>
&nbsp;

↑↑↑ HTML ENDS ↑↑↑

#13 A Super Great Headline About Our Features

And Of Course A Tagline That’s Really Good Too

↓↓↓ HTML BEGINS ↓↓↓

 
<h2 style="text-align: center;">#13 A Super Great Headline About Our Features</h2>
<p style="text-align: center;">And Of Course A Tagline That's Really Good Too</p>
&nbsp;
<div class="one-half first"><strong>This is Feature #1</strong> – Here is a really awesome feature. Be sure to make this a powerful punch line that people see as a big selling point. And have a blessed day!</div>
<div class="one-half"><strong>This is Feature #2</strong> – Here is a really awesome feature. Be sure to make this a powerful punch line that people see as a big selling point. And have a blessed day!</div>
<div class="one-half first"><strong>This is Feature #3</strong> – Here is a really awesome feature. Be sure to make this a powerful punch line that people see as a big selling point. And have a blessed day!</div>
<div class="one-half"><strong>This is Feature #4</strong> – Here is a really awesome feature. Be sure to make this a powerful punch line that people see as a big selling point. And have a blessed day!</div>
<div class="one-half first"><strong>This is Feature #5</strong> – Here is a really awesome feature. Be sure to make this a powerful punch line that people see as a big selling point. And have a blessed day!</div>
<div class="one-half"><strong>This is Feature #6</strong> – Here is a really awesome feature. Be sure to make this a powerful punch line that people see as a big selling point. And have a blessed day!</div>
&nbsp;

↑↑↑ HTML ENDS ↑↑↑

#14 Are You Looking For A Centered Call To Action?

With a Non-In-Line Centered Button ›

↓↓↓ HTML BEGINS ↓↓↓

 
<h2 style="text-align: center;">#14 Are You Looking For A Centered Call To Action?</h2>
&nbsp;
<p style="text-align: center;"><a class="button" href="http://www.pestsitesthatsell.com">With a Non-In-Line Centered Button ›</a></p>
&nbsp;

↑↑↑ HTML ENDS ↑↑↑

HTML AND CSS SNIPPET COMBOS

#15 Colored Buttons

Colored Button

Transparent Button

↓↓↓ HTML BEGINS ↓↓↓

<p style="text-align: center;"><a class="button-red" href="#">Colored Button</a></p>
<p style="text-align: center;"><a class="button-clear" href="#">Transparent Button</a></p>

↑↑↑ HTML ENDS ↑↑↑

↓↓↓ CSS BEGINS ↓↓↓

/* Color Buttons
------------------------------------------------------------ */
.button-clear {
color: #111;
padding: 15px 20px;
margin: 10px 10px 60px;
line-height: 2.3;
}
.button-red {
color: #fff;
padding: 15px 20px;
margin: 10px 10px 60px;
line-height: 2.3;
}
.button-clear:hover,
.button-red:hover {
color: #111;
}
.button-clear {
background-color: none;
border: 2px solid #111;
}
.button-clear:hover {
color: #fff;
background-color: #d35458;
border: 2px solid #111;
}
.button-red {
background-color: #c82127;
border: 0px solid #c82127;
}
.button-red:hover {
color: #fff;
background-color: #d35458;
border: 0px solid #d35458;
}

↑↑↑ CSS ENDS ↑↑↑

That’s all we got for now. Let us know what you’d like to see added!