Foundation Reveal Shortcode Plugin for WordPress

WordPress

I like using Zurb’s fantastic Foundation framework. I’ve been using it heavily over the last year for many projects.

One of my favourite parts is their Reveal modal box. It’s fast, responsive and looks pretty slick. However, in versions prior to the latest version 5, it doesn’t play nicely with WordPress, if you want to add a modal box inline in your content it falls over.

In Foundation versions 3 & 4, Reveal modal content needs to be placed before the closing </body> tag, else your modal box ends up displaying in some pretty awkward places. Not so slick.

I couldn’t find any plugins at the time to handle this functionality so I wrote a simple one to allow myself and my team to quickly and simply add modal box content in the WordPress editor using shortcodes. This prevented us having to spend time handling copy and allow editors to edit their modal box content within WordPress. It also prevents delineating otherwise well written copy.

[reveal id=”example” link=”Here’s a working example” ]

Instructions

Highlight the text your’d like to place in your modal box.

Click the reveal icon in your editor toolbar.

Enter a unique ID for the Reveal.

Optionally enter some link text to replace the modal content, or manually place it wherever you like in your content.

You can also manually create a modal box like this.

[/reveal]

The plugin can be found on my GitHub account. If anyone has any suggestions for improvements please let me know or make some pull requests.

GitHub Project

Edit: I’ve now added a simple editor plugin for TinyMCE to make it extra easy to drop in the shortcode to your editor.

When including files within your WordPress theme use locate_template() to allow them to be overridden by child themes.

locate_template() will search for the file within STYLESHEETPATH and TEMPLATEPATH, returning the path as a string if it exists.

WordPress

Organising WordPress Themes – Partial Templates

WordPress

The root directory of your WordPress theme can get pretty crowded pretty fast as a project get steadily more complex. One thing that I found used to frustrate me was differentiating at a glance, my partial template files, from my page template files, from all the others that find their way in there.

De-cluttering your workspace makes it easier to spot items you require at a glance, helping you to avoid losing concentration whilst you’re working.

This becomes especially true when you start collaborating on a project, using task runners and css pre-compilers. All these things can make a theme fairly bulky, so if you know where everything is going to be in advance then it can help to speed up your work process.

Other articles in this series

  1. Organising WordPress Themes – Partial Templates
  2. Organising WordPress Themes – Setting Up a Compass Project

WordPress Multisite Login Redirect Loop [Resolved]

WordPress

This is an issue that has occurred several times to me. Each time has been with Chrome on a subdomain multisite setup. Which is annoying because Chrome is my preferred browser for development.

The Problem

Using Chrome, or potentially any browser, on a wp multisite install with more than one subdomain blog set up, the user is constantly redirected to the login screen despite entering valid login details. A good indication that this is the problem is that clearing the browser cookies cache allows an unaffected login. Not really a long term solution.