Your Mental Health First, based on Shimmer by Viva la Violette

Project Description

Melanie Watkins was referred to me by Priscilla Rice at Live Oak Studio, producer of the Official BNI Podcast, whose website I built and manage. “Dr. Mel” is a psychiatrist who divides her time between inpatient work and a private practice. She went through college and medical school as a single mother, which is pretty impressive. You might want to read her memoir, Taking My Medicine, which tells the story of how she did that.

Although Dr. Mel already had a private practice site and a blog, she needed a new site for her podcast, videos, and forthcoming books. I considered the Author Pro theme and mocked up a site using the colors from her practice site (Dr. Mel loves purple), but the result was too dark and somewhat off-putting. (I like Author Pro, though, and it will work for sites that don’t include books.)

Dr. Mel ended up selecting Shimmer by Viva la Violette for the base theme for her new podcast site, which she wanted to be “white, bright, and light,” and feminine but not oppressively so. The original theme has a narrow top widget area meant for social links and a horizontal email subscription, a home middle section, and a home bottom section.

I modified the theme considerably, both to use a CSS background instead of a background image and to add widget areas to the home page.

I ended up removing the Home Top widget area and adding a horizontal opt-in bar instead, positioned below the new Home Welcome widget area on the home page and at the top of other pages. Because Dr. Mel asks for more than name and email from people subscribing to her newsletter, I decided to use text widget instead of Genesis eNews Extended in the horizontal opt-in widget area.

I kept the original Home Middle and Home Bottom widget areas, but added a Home Middle Left and Home Middle Right. These widget areas stack widgets vertically; each has the class .one-half applied so they automatically display at full width on smaller screens. On the final site, Home Left displays three Genesis Featured Page Advanced widgets and Home Right shows a Gravity Form.

I also borrowed the Social widget area from the footer of Whitespace Pro and added a footer menu.

One thing Author Pro has that I really like is widget counts: depending on the number of widgets you place into a widget area, the theme automatically arranges them in rows.

Altitude Pro also has widget counts, though the layout it uses for them is somewhat different. I just copied the code for Author Pro’s widget counts into the functions.php file and then added the appropriate CSS to the stylesheet. It was very easy to do and I expect to add this feature to many client sites in the future.

I have three widgets in the home middle area and three widgets in the home bottom area, which makes them .widget-thirds widgets. Again, each of these widgets displays at 100% width on small screens. These are featured post widgets, displaying the latest post in each category: podcast, video, and blog posts.

There were a few more touches, like adding the Periscope social icon (which is only available in the Socicon font right now) to Simple Social Icons, creating a modified box around the podcast player, and adding an expanding search box to the menu. (Hat tip to Sridhar Katakam for that tutorial.)

Finally, I did a little tinkering so that the featured image would display on single pages, blog posts and podcast posts, but not on video posts. (You’ll see that in the screenshots.)