When the Radiant Body Yoga Teacher Directory stopped working, I decided to roll my own filterable directory by registering a yoga_teacher post type, adding some custom fields with ACF, and using Ultimate WP Query Search Filter to narrow results by location. It worked well enough that I’ll be likely to use the same technique on other sites. Continue Reading Roll Your Own Filterable Directory with Genesis, ACF, and Ultimate WP Query Search Filter
Tutorial
Add Periscope to Simple Social Icons
I have a client who has gotten into Periscope in a big way. Right now the only way for her to embed her Periscope videos into her WordPress site is to upload them to YouTube first, but meanwhile, there was a more basic problem: adding a link to her Periscope profile into Simple Social Icons, which I’m using in both the header and the footer of the site to display social profile links. The solution turned out to be an icon font called Socicon. If you need a Periscope social link on a site, read on to see what I did. Continue Reading Add Periscope to Simple Social Icons
Horizontal Output for Events Calendar Pro Shortcode
The latest version of Events Calendar Pro includes several shortcodes. This tutorial shows you how to make the [tribe_events_list]
shortcode display events in rows, including media queries for smaller screens. Remember, the key to adapting these tutorials for your own site is to make sure you replace the CSS container classes in the demo with the classes from your own theme’s CSS. Continue Reading Horizontal Output for Events Calendar Pro Shortcode
Adding a CSS Background to the Shimmer Child Theme for Genesis
Want to replace the background image in Shimmer with a polka-dot pattern created with pure CSS? Here’s how–plus a link to a handy free CSS gradient generator tool. Continue Reading Adding a CSS Background to the Shimmer Child Theme for Genesis
How to Fit Your Screen Size to Your Background Image (Instead of the Other Way Around)
When is a background image not a background image? CSS for background images is designed to fit the background to the container. What I needed to do was fit the container to the background image. The solution is to make your “background” image a foreground image and use position
and z-index
to overlay your content on the image. Continue Reading How to Fit Your Screen Size to Your Background Image (Instead of the Other Way Around)