How-To: Add Minimal-UI Viewport Meta Tag to WordPress

Introduced with iOS 7.1

I don’t have an iPhone, but my daughter does have an iPad Mini, which is running the latest iOS, 7.1. However, this only works for those of you on iPhone’s, so I see no difference. :

Martin Wolf was kind enough to let me use the image from his post about this subject so that I could more easily illustrate the difference. So, even if you don’t have an iPhone, you can still see the changes this makes in the featured image above.

With the release of iOS 7.1 (and possibly late 7.0.x builds), Safari introduced support for a new value in the viewport meta tag. To me, it sounds like it adds effects similar to how Chrome hides its top bar when a page is loaded, but more. For example, the navigation buttons at the bottom are hidden.

I rarely use Safari, like never. Chrome is available on iOS, so that’s what I’ve always used. That’s not to say that you shouldn’t support Safari to it’s fullest, because I’d wager that a majority of iOS users stick with the default, which is Safari.

Chances are, your theme already has a viewport meta tag defined in it’s header.php file. If it does, add minimal-ui to it, so it should look something like this:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimal-ui" />

If your theme doesn’t already have a viewport meta tag set, you can add one with your functionality plugin or theme’s functions.php file like so:

<?php
function set_viewport() {
?>
<meta name="viewport" content="width=device-width, minimal-ui">
<?php
}
add_action('wp_head', 'set_viewport');
?>

Adding the code above will add a brand new viewport meta tag for you, so only use that if your theme isn’t already using a viewport meta tag in it’s header.php file.

That’s it!

Auto-Enable Threaded/Nested Comments in WordPress

Threaded comments let people reply to each other

In theme or functionality plugin

You can auto-enable nested comments in your theme’s functions.php file or in your functionality plugin. Just use the code below.

function enable_threaded_comments(){
 if (!is_admin()) {
  if (is_singular() AND comments_open() AND (get_option('thread_comments') == 1))
   wp_enqueue_script('comment-reply');
  }
}
add_action('get_header', 'enable_threaded_comments');

That’s all there is to it. Threaded/nested comments will automatically be enabled, so you won’t have to turn them on in the WordPress Dashboard like you normally would.

Add HTML To The End of Every WordPress Post

Great for signup forms or affiliate links

I don’t place the DigitalOcean affiliate link manually at the end of each post. That’s because it’s super easy to do with add_filter('the_content').

Add The Message, With or Without HTML

function add_post_bottom_content($content){

    $html = '<span class="post-footer-message"><a href="http://oursponsor.com" target="_blank">Thanks to our sponsor for the generous donation!</a></span>';

    if( !is_page( ) && isset($html) ) {

        return $content . $html;

    } else {

        return $content;

    }

}

add_filter('the_content', 'add_post_bottom_content');

To disable the content, just empty the $html variable .

$html='';

The anchor tag is wrapped in a span with a class of post-footer-message. You’ll want to style your message with that, rename the classes if you want, just stay consistent with the naming.

Some basic styling, with no underline on hover:

span.do_link a:hover {
  font-style:none;
}

As long as you have some basic CSS knowledge, you’ll be able to apply all the styling you need. Just remember to add your CSS to your child theme’s style.css file, or load up the custom CSS file.

The code in this post can go in your theme’s functions.php file or in your WordPress functionality plugin.

Creating A WordPress Functionality Plugin

Keep your customizations in place, like that driftwood up there

A functionality plugin is a WordPress plugin that is specific to your site, and contains the additional functionality you need your site to have. This is a much better option than adding features to your theme’s functions.php file, because it allows you to change themes at will, yet keep your customizations via the plugin.

WPCandy has a great write-up on creating a functionality plugin and does a great job of explaining why you’d want to use one, and also what kind of things belong in a functionality plugin. Here’s one of my favorite pieces from that WPCandy article:

To decide what belongs in a functions.php file and what belongs in a functionality plugin, think long term. Rather than thinking about how your website will look and behave this week, think about how it will look and behave five years from now. With few exceptions, I bet all of our sites will have new and upgraded themes in five years’ time.

If a feature is theme-specific, such as sidebars or menus, is should go into your functions.php file. If the feature interacts with content of any type, it belongs in a functionality plugin.

Creating The Plugin

This piece is so easy, we’re essentially creating our own WordPress plugin. First, create a new folder called functionality-plugin. Create it inside the plugins folder for your WordPress site.

Next, we just need to create the PHP file and save it in the functionality-plugin folder. Your plugin needs to have some specific content in the comments at the top of the file for WordPress to recognize it as a plugin, you can see those in the functionality plugin example below. Our functionality plugin will load a JavaScript file that your site relies on ALL the time, no matter what theme is currently in use.

<?php
/*
Plugin Name: Tyler's Functionality Plugin
Description: Everything to run my site.
Version: 1.0
License: GPL
Author: Tyler Longren
Author URI: http://longren.io/
*/

function load_site_scripts() {
    // load javascript
    wp_enqueue_script( 'photo-service-script', 'http://thisphotoservice.com/script.js' );
 
}
add_action( 'wp_enqueue_scripts', 'load_site_scripts' );

?>

So, with that, as long as this plugin is enabled, your site will always load that necessary JavaScript file, http://thisphotoservice.com/script.js.

You can safely use that code as a starting point for your own functionality plugin. Just make sure to save that code in the functionality-plugin folder.

The filename doesn’t matter, just make sure to save it with a .php extension. Navigate in your web browser to your WordPress Dashboard, go to Plugins, and enable your plugin just like you would any other plugin. That’s it!

Really, most of what I know about functionality plugins came from Ryan Imel and his article at WPCandy, so a LOT of credit is owed to Ryan.

Do you use a functionality plugin?

View Results

Loading ... Loading ...

There’s this plugin at WordPress.org, too, called Functionality. It’s essentially a plugin for creating a functionality plugin it looks like, but I’m really not sure. Anybody used it before? Comments are open below.

Embed MarkDown in WordPress Posts

Easily embed markdown into WordPress posts and pages.

There’s lots of plugins to enable your entire post to be composed of Markdown, but what if you only want a piece of your post to be in Markdown? I shortcode sure would come in handy.

This is where the Inline Markdown plugin comes in to play. Just write your WordPress post as usual, and wrap any Markdown content in the

shortcode.

As an example, here’s a portion of the README from my Rootdip WordPress theme, that’s written in Markdown. Inline Markdown is an excellent tool for displaying entire README’s or portions of them from GitHub repos.

The md shortcode starts immediately following this line:
[md]Other Considerations

A majority of the images included in RootDip are from the iconic icon set by P.J. Onori. Images from Iconic are the tag, sticky post identifier, link post format identifier, status post format identifier, quote post format identifier and left and right arrows. I will likely use more images from Iconic as I add additional features/post formats to RootDip.

How To Contribute

  1. Fork it
  2. Create your feature branch (git checkout -b my-new-feature)
  3. Commit your changes (git commit -am 'Add some feature')
  4. Push to the branch (git push origin my-new-feature)
  5. Create new Pull Request

And that’s it, end of the md shortcode is on the line above. I used the md shortcode like so to achieve that:

Other Considerations

A majority of the images included in RootDip are from the iconic icon set by P.J. Onori. Images from Iconic are the tag, sticky post identifier, link post format identifier, status post format identifier, quote post format identifier and left and right arrows. I will likely use more images from Iconic as I add additional features/post formats to RootDip.

How To Contribute

  1. Fork it
  2. Create your feature branch (git checkout -b my-new-feature)
  3. Commit your changes (git commit -am 'Add some feature')
  4. Push to the branch (git push origin my-new-feature)
  5. Create new Pull Request

Pretty easy to do and really useful for embedding markdown from GitHub readme’s directly in your WordPress posts.