• Skip to primary navigation
  • Skip to footer navigation
  • Skip to main content
  • Skip to footer

WP Fangirl

WordPress Consultant Sallie Goetsch

  • speakerdeck icon
  • Home
  • About
  • Why WordPress?
  • How I Work
  • Portfolio
  • Services
  • Blog
  • Contact

Your Mental Health First

Filed Under: PodcastingTagged With: Genesis

Your Mental Health First home page

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.

Shimmer Theme Demo Screenshot

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.

screenshot: widget areas on Your Mental Health First

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.

screenshot: Your Mental Health First home welcome widget area and horizontal opt-in widget

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.

screenshot: Your Mental Health First home middle left and right widget areas

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

screenshot: Your Mental Health first social widget and 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.

layouts for Author Pro widget counts

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.

Your Mental Health First home middle widget area

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.)

Your Mental Health First social links with Periscope icon

screenshot: episode box and podcast player for Your Mental Health First

Expanding search box (expanded) on Your Mental Health First

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.)

Screenshots

Your Mental Health First home page
Your Mental Health First home page
Your Mental Health First About the Podcast page
About the Podcast page with PowerPress subscribe widget
Your Mental Health First Ask Dr Mel page
Ask Dr. Mel page for questions about the podcast (Gravity Forms)
Your Mental Health First Contact Page
Contact Page (Gravity Forms)
Your Mental Health First blog index page
Blog Index Page
Your Mental Health First Single Blog Post
Single Blog Post
Your Mental Health First Video Archive Page
Video Archive Page
Your Mental Health First Single Video Post
Single Video Post
Your Mental Health First Podcast Archive Page
Podcast Archive Page with PowerPress Player
Your Mental Health First Single Podcast Post
Single Podcast Post
Your Mental Health First Books Page
Books Archive Page
Your Mental Health First Single Book Entry
Single Book Entry (Genesis Author Pro plugin)

Colophon

Project Details

Client Name

Melanie Watkins

Client Company

Your Mental Health First

Project URL

http://www.yourmentalhealthfirst.com

Base Theme

Shimmer

Project Fonts

  • Crimson Text (Titles)
  • Abel (Headings)
  • Roboto (Body)

Premium Plugins

  • BackupBuddy
  • Gravity Forms
  • Gravity Forms Mailchimp Add-on
  • SeedProd Coming Soon Pro

Free Plugins

  • Anti-Spam
  • Automatic Featured Images from YouTube/Vimeo
  • Blubrry PowerPress
  • Display Posts Shortcode
  • Facebook Page Plugin
  • Genesis Author Pro
  • Genesis Featured Page Advanced
  • Genesis Sandbox Featured Content
  • Heartbeat Control
  • Jetpack by WordPress.com
  • Regenerate Thumbnails
  • Responsive Menu
  • Rich Text Excerpts
  • SG CachePress
  • Sharify Social Share Buttons
  • Simple Custom CSS
  • Socicon
  • Post Type Archive Link
  • WP User Avatar
  • WP-Sweep
  • Yoast SEO

Share this post:

Share on Twitter Share on Facebook Share on Pinterest Share on LinkedIn Share on Email
« Appliance 911
Safe Port Financial Associates, LLC »

Footer

Contact Info

2063 Main St #133 · Oakley, CA 94561

+1 (510) 969-9947

author-izer

sallie [at] wpfangirl [dot] com

Location

Map of East Contra Costa County

I live in Oakley, CA and run a WordPress Meetup in Oakland, CA. Don't confuse them!

Subscribe for New Posts

  • Since I blog on an unpredictable schedule, you might want to subscribe by email. I'll also send out occasional announcements about events.

  • Privacy Policy: I will never sell or rent your contact information.

  • This field is for validation purposes and should be left unchanged.
  • Contact
  • Colophon
  • Comment Policy
  • Privacy Policy
  • Five for the Future

Copyright © 2023 · Utility Pro on Genesis Framework · WordPress · Log in

MENU
  • Home
  • About
  • Why WordPress?
  • How I Work
  • Portfolio
  • Services
  • Blog
  • Contact