Brian Gardnerhttps://briangardner.com
Minimalist Designer · Creative Entrepreneur
Wed, 23 May 2018 21:17:37 +0000 en-US
hourly
1 https://wordpress.org/?v=5.0-alpha-43311Customize the Twenty Seven Pro Theme Footerhttps://briangardner.com/twenty-seven-pro-theme-footer/
https://briangardner.com/twenty-seven-pro-theme-footer/#respondTue, 06 Sep 2016 13:10:36 +0000http://briangardner.com/?p=10338Last week I released Twenty Seven Pro, a minimalist theme for lifestyle and food bloggers. I’m please with how well it has been received so far. One of the things I like most about the Twenty Seven Pro theme is the way I designed the footer — I created two sides, separated by a nifty circular […]

]]>https://briangardner.com/twenty-seven-pro-theme-footer/feed/0Remove Categories from Blog Homepagehttps://briangardner.com/remove-categories-from-blog-homepage/
https://briangardner.com/remove-categories-from-blog-homepage/#respondWed, 18 Nov 2015 16:08:05 +0000http://briangardner.com/?p=9459A few weeks ago I updated the design here on my website. My primary motivation at the moment is to share my personal experiences, so I wanted my visitors to only be shown posts from my Journal, but still wanted to be able to publish other content. I also love to help folks build websites, […]

]]>A few weeks ago I updated the design here on my website. My primary motivation at the moment is to share my personal experiences, so I wanted my visitors to only be shown posts from my Journal, but still wanted to be able to publish other content.

I also love to help folks build websites, so from time to time I write some Genesis tutorials as well as share thoughts and hacks on web design.

After doing some research, I found it was possible to achieve my goal. I just needed to identify the category ID’s I wanted to exclude — which were 5 and 7.

Below is the code snippet I use to remove categories from my blog homepage:

]]>https://briangardner.com/remove-categories-from-blog-homepage/feed/0Display Social Media Links with Ioniconshttps://briangardner.com/social-media-ionicons/
Mon, 09 Nov 2015 18:36:40 +0000http://briangardner.com/?p=9063If you scroll to the bottom of this page, you’ll see I built a custom footer that includes a row of social media icons. These links go out to my social media profiles, in the hopes people will follow me and help build my personal brand. Our team at StudioPress has developed a plugin called […]

]]>If you scroll to the bottom of this page, you’ll see I built a custom footer that includes a row of social media icons. These links go out to my social media profiles, in the hopes people will follow me and help build my personal brand.

Our team at StudioPress has developed a plugin called Simple Social Icons and is being used on over 100,000 websites. I love the plugin, but the design of those icons didn’t quite go with what I currently have here.

Earlier this year I found Ionicons — a 100% free and open source set of icon fonts. They have a group of icons that are sleek and modern, and were a better fit for my design.

I thought it’d be fun to write a tutorial on how to display social media links with Ionicons, and you’ll see it’s quite easy to do. Just follow these steps.

If you’re looking to add Ionicons in another location, here’s a comprehensive list of Genesis Hooks for you to use as reference. I’m also pleased to share with you some Genesis code snippets that I use when I’m developing websites with the Genesis Framework. They are free to use, so go ahead and do whatever you want with them.

]]>Add a Comment Policy Box to Your Websitehttps://briangardner.com/comment-policy-box/
Mon, 02 Nov 2015 12:18:36 +0000http://briangardner.com/?p=8949Our words can be powerful, but like most things in life they can be destructive if used irresponsibly. Many blogs have an open door policy when it comes to comments on their posts, but it seems as though times are changing. If you have experienced abuse in your comments section, or simply want to lay […]

]]>Our words can be powerful, but like most things in life they can be destructive if used irresponsibly. Many blogs have an open door policy when it comes to comments on their posts, but it seems as though times are changing.

If you have experienced abuse in your comments section, or simply want to lay down some general ground rules, there’s some good news. I’ll show you just how easy it is to add a Comment Policy box before the comments of your Genesis-powered website.

Adding a Comment Policy Box

The first thing you need to do is register the Comment Policy widget area. Open up your theme’s functions.php file and place the following code:

If you’re looking to add your Comment Policy in another location, here’s a comprehensive list of Genesis Hooks for you to use as reference. I’m also pleased to share with you some Genesis code snippets that I use when I’m developing websites with the Genesis Framework. They are free to use, so go ahead and do whatever you want with them.

]]>Add a Sticky Message to Your Websitehttps://briangardner.com/genesis-sticky-message/
Thu, 01 Oct 2015 14:03:51 +0000http://briangardner.com/?p=5108Sometimes you want to say something important to your audience, and you can do that with just a few lines of code.

]]>The other day I was designing a personal site and implemented a feature that I thought would be really fun to share. It’s called a Sticky Message, which I also added to my Mobile First theme that’s freely available for you to download.

If you’re wondering how to add the Sticky Message into your Genesis website, I’ve got good news for you. It’s quite simple, and I’m going to show you below.

Adding a Sticky Message

The first thing you need to do is register the Sticky Message widget area. Open up your theme’s functions.php file and place the following code:

]]>I’m frequently asked about optimizing SEO from people who build their websites with the Genesis Framework. Most folks are aware of the SEO Settings page, but there are a few other SEO features can be leveraged as well.

When you edit a category or tag in your WordPress dashboard, you have the option to fill out some fields that will help with building up your SEO presence.

You can see from the screenshot above what I’ve done for my Genesis Tutorials category. Clearly that I want to rank for “Genesis tutorials”, so I’ve written some text to better optimize my category page for SEO.

Google likes category and tag archives pages, especially when there is additional text on the page that includes the keywords that you’re hoping to rank for.

You’ll also want to go to the Genesis > SEO Settings page and make sure you don’t have the Apply noindex to Category Archives optioned checked.

If you’re looking for some really good examples of SEO optimized category pages, you can see what Rae Hoffman did on her Affiliate Marketing page or what Brian Clark did for his Boulder Real Estate page.

]]>The Simple Social Icons plugin is an easy to use, customizable way to display icons that link visitors to your various social media profiles. With a simple widget options interface, you can choose which profiles to show, customize the color and size of your icons, and specify the alignment of them.

The default output of the Simple Social Icons is one set of colors. However, it’s possible to use CSS for customizing the icons to match the color of their brand.

Customize the Social Icons

Below is the CSS that is required to customize each of the social media icons:

While the use of !important isn’t ideal, it is a necessary part of the code. Be sure to set the Icon Font Hover Color to #fff and the Background Color to #fff in the widget options as this will universally apply white to all social media profiles.

I hope that you enjoyed this Genesis tutorial. I have also published a list of Genesis code snippets, so feel free to use anything you see there.

]]>Building a Custom Genesis Themehttps://briangardner.com/building-custom-genesis-theme/
Sun, 06 Sep 2015 13:34:09 +0000http://briangardner.com/?p=2282Here’s a short list of things I do right away when developing custom themes.

]]>I’m asked quite frequently about my workflow when I build Genesis website. While it may vary from time to time, there’s a short list of things I do right away when developing custom themes for folks. This was true when I developed Becoming Minimalist for Joshua Becker and when I did my own redesign here.

If you are interested in building a custom Genesis child theme from scratch, check out the comprehensive course that Carrie Dils has put together.

Here are the first 5 things I do when building a custom Genesis website.

1|Remove Unnecessary CSS

I like to run a lean ship, so I approach my style sheet with a minimalist mindset. If I don’t need something, I remove it before I even get started. Examples of things in a style sheet I’d remove would be declaration blocks for sidebars, footer widgets, and widget areas I know I won’t be using.

2|Remove Media Queries

Even though our StudioPress themes are mobile responsive and include CSS for media queries, I make enough changes in a theme that warrants this. Once I’m done designing the desktop version, I go back and add the media queries. Since I add containers and elements when building a theme, this ensures that I don’t miss anything.

3|Remove Approved HTML Tags

This is something that makes me cringe every time I see it on another site. I’m not exactly sure why, and my guess is that it’s very seldom used by site visitors. You can remove the approved HTML tags container with this code:

Update: WordPress has removed the output of the approved HTML tags from the comment form, so technically this step is no longer necessary.

4|Remove Layouts/Sidebars

This is something that quite honestly isn’t necessary, but I still do it. When I know I won’t be using specific site layouts or sidebars, I feel better removing them. Because No Sidebar. You can remove the site layouts with this code:

Obviously you need to modify the code above depending on which site layouts and sidebars you won’t be using. The code above is what I use on my site, because I’m only using a full-width content site layout and no sidebars

5|Optimize Gravatars

This is something for me that is really not necessary anymore because I’m using the Mobile First theme I created as a starter theme. Prior to that, it was the Genesis Sample theme which didn’t include functions and CSS to optimize Gravatars for Retina Display. If your theme doesn’t have it, and you want to do this manually, follow this tutorial .

And there you have it … Once I get these things out of the way, I start the process of developing a custom theme on the Genesis Framework.

]]>Add Simple Social Icons to Your Site Footerhttps://briangardner.com/add-social-icons-footer/
Tue, 01 Sep 2015 13:19:14 +0000http://briangardner.com/?p=2432Learn how to use CSS and a widget area to display an array of social media icons across the bottom of your website.

]]>Since launching my new design a few weeks ago, I’ve been asked a couple times how I placed the social icons in my footer — specifically how I have them overlapping the white content area and the black footer.

In typical Genesis fashion, it’s a really easy thing to do. For reference the code I provide will show you how to display them on the Mobile First theme. See the screenshot below for an example of how this will look.

Before you get started, make sure that you have downloaded and installed the Simple Social Icons plugin for WordPress. You’ll need this, ya dig?

Register Widget Area

The first step in getting the Simple Social Icons to show in your site footer is to register a widget area that will be used for placement.

Style the Social Footer

Lastly, you’ll need to add a little CSS to your style sheet to position the Simple Social Icons. The code below will help “pull up” the icons so that there’s an overlap with the two containers and control the spacing between them.

]]>Introducing a Mobile-First Genesis Themehttps://briangardner.com/mobile-first-genesis-theme/
Wed, 05 Aug 2015 13:51:56 +0000http://briangardner.com/?p=1455I decided it was time to embrace the idea that a mobile-first strategy with theme design was something to consider.

]]>One of the things that I love most about my position in our company is that I have the ability to try new things when it comes to design.

Usually that takes place in the context of developing Genesis themes and it’s always an adventure. So a few weeks ago I started playing with the idea of creating a mobile-first version of the default Genesis sample theme.

The idea wasn’t exactly new to me, since community member Mickey Kay and his team at Mighty Minnow had released their own version last year. I’ve also had a few brief conversations with Gary Jones on the subject of mobile-first as well.

I decided it was time to embrace the idea that a mobile-first strategy with theme development was something to consider. I’ve read many articles on the subject, and thought it was finally time to see what the fuss was all about.

So I downloaded our sample theme, installed a fresh demo and began hacking away at the CSS. Check out the Mobile First demo site to see what happened.

I plan on writing more about the actual process and what I’ve learned along the way, but in the meantime I thought that I’d share what I’ve been working on.