How I Created My Genesis Site

Today I want to introduce a series where I am going to walk through how I created my site. Over this series, I am going to walk through my setup, my development processes, my theme code modifications and enhancements, and my plugins I created or used to make my Genesis website.

Setup & Technologies Utilized

In the development of my site, I used the following technologies and processes:

1. Preferred IDE: PHPStorm
2. Version Control: Git (Git for Windows)
3. DevOps/Automation: Node, Bower & Grunt (though I could have easily used Gulp)
4. DevOps/Automation: SASS (CSS pre-processing)
5. DevOps/Automation: MySQL Workbench & DB Syncing
6. Local Development Environment: Varying Vagrant Vagrants
7. Hosting: WP Engine for Staging & Production via Git Deploy

Do not let this list overwhelm or intimidate you! For Node, Grunt, Bower, SASS, and MySQL Workbench, these are things all developers can learn if they want, and I am going to give you an easy way to get up and running fairly quickly.

Theme

My site is built on the Genesis Framework. Typically I start with my own vanilla child theme to create a website so to make sure I have no unnecessary overhead and bloat. This time, I started with Altitude Child Theme but did some work under the hood to extend its features. These customizations include:

• Unlimited Front Page Sections: By default, Altitude only allows for seven (7) sections. At one point, I wanted to do nine (9) or ten (10), so I extended this to be able to change my mind easily and often.
• Filterable Background Image Sections: By default, Altitude allows you to customize this via a filter (altitude_images), which is awesome! Being lazy, I wanted a single line of code to change this. So I switched the functionality to use add_theme_support.
• Icon Fonts: I love icon fonts like Font Awesome, so I added it to my child theme.
• Different Primary Menus: For user experience, I wanted the home page menu to use single page navigation via anchors, but on other pages I wanted to go to the actual page or post instead of back to the home page. So on the home page, I display one menu and on other pages I display a different menu.
• Optimized Script/Style Output: By default, most Genesis child themes output non-minified CSS delegating this functionality for plugins and cache. Since I already minimize my CSS, there is a simple code snippet to use for production sites to output the minified CSS file. The great thing about this is that it removes the information about the theme, which improves privacy.
• Custom Responsive Menu: Call me vain, but I love great mobile menus. Genesis Child Themes have great mobile menus! But I found one that I simply love, so I wanted to incorporate it into my theme. I will walk through what I did and how I added it to my child theme for anyone else who wishes to do the same.

Plugins

My site features a small list of plugins, namely:

• Akismet Anti-spam: Spam Protection (Downloaded: %%downloaded%% times)
• Display Posts – Easy lists, grids, navigation, and more (Downloaded: %%downloaded%% times)
• %%name%% (Downloaded: %%downloaded%% times)
• Genesis Sandbox Featured Content Widget (Downloaded: %%downloaded%% times)
• Gravity Forms
• Jetpack – WP Security, Backup, Speed, & Growth (Downloaded: %%downloaded%% times)
• Simple URLs – Link Cloaking, Product Displays, and Affiliate Link Management (Downloaded: %%downloaded%% times)
• Soliloquy
• Soliloquy - Featured Content Addon
• Widget Logic (Downloaded: %%downloaded%% times)
• WPS Core Functionality
• WP Sync DB
• Yoast SEO (Downloaded: %%downloaded%% times)

Please let me know if you have noticed anything that I missed!