Admin Bar Edit Content Links WordPress Plugin

The options page. Every custom post type registered on your site will show up here.
The options page. Every custom post type registered on your site will show up here.

So I’ve got another plugin in the WordPress plugin repository called “Admin Bar Edit Content Links.” Yeah, I know it’s a really long name.It adds a menu to the admin bar with links to edit pages, posts, or any other custom post type used on your site. There’s an options page so you can choose which post types you want in and which ones you want out. All personal bias aside, this is one of my absolute favorite time-saving WordPress plugins. I install it on every website I touch and once my clients use it, they can’t get by without it.

The idea for this plugin came to me when I was working a corporate job banging out 10+ “template” websites a week. Not much development but a ton of content editing. You know the drill, click “Pages,” wait for it to load, scroll around and find the page you want to edit. “Crap. It’s on the next page.” Click to the next page, wait for it to load, finally see the page you want to edit and click in to edit that page. So 30 seconds later, you’re finally editing the content you need. 30 seconds doesn’t sound like much, but it definitely adds up when you’re putting content into a large site.

All of your selected post types will show up in this menu.
All of your selected post types will show up in this menu.

With this plugin, you can edit any page (or post or any other custom post type) from any page while logged into WordPress. Just hover over “Edit Content,” hover over the post type you want to edit and you get a list of all published posts of that type. Clicking the name of the post takes you directly to the edit screen. Instead of 2-3 page loads to get you where you need to go, you have one. One page load between you and editing your content. You literally can’t get any closer than that.

This WordPress plugin saves time and works great out-of-the-box, but there’s also a filter, bs_abep_query_args, that allows you (or your developer) to change the queries used to pull the post names into the menu. This will allow you to change the orderby parameter (“menu_order” by default), post_status, or any almost any other parameter used in WP_Query. The only parameter I don’t allow changed is post_type. I could not think of a use case where this would be beneficial. If you come up with one, please let me know in the comments and I’ll change it.

So give this plugin a shot. Download it from the plugin repo, install it on your site and see if it doesn’t get put on your list of must-have WordPress plugins. If you find any bugs, or have ideas for ways to make this more useful, report an issue on GitHub.

WordCamps Are Awesome and You Should Go

WordCamp Nashville is coming up on May 16th, 2015. If you live within 4 hours of Nashville, and work with WordPress – developers or bloggers – or work with people who work with WordPress – designers, account managers, content creators – you should definitely be there. I went to my first WordCamp in Columbus, Ohio in 2011 and I don’t want to say it changed my life, but it kinda changed my life.

If you don’t know what WordCamp is – and apparently, that’s a lot of people – it is a conference, organized by the community, that focuses on WordPress (more specific info here). WordCamps are organized, planned, and staffed 100% by volunteers from the local WordPress community and is paid for through ticket sales, local as well as national multi-event sponsorships. They usually last between 1 – 3 days and tickets usually cost between $20 and $50 depending on the number of days the conference is held. At that price, WordCamps are far more economical than the typical tech or design conference.

“But I don’t know enough about WordPress to go to a WordCamp.”

Yes you do. Seriously. Most WordCamps have several ‘tracks’ of content. This year WordCamp Nashville, for instance, will have a Beginner track – focused on blogging, and marketing your site. An Intermediate track – with talks that get into how themes work, and how to start coding. Then we’ll have a Developer track – this is where you can expect to hear talks about more advanced topics like building an enterprise level application with WordPress. WordCamp Atlanta this year also had tracks that focused on Business and Design.

So regardless of your comfort level or involvement with WordPress, there will be something at WordCamp for you. It’s also the perfect place to go if you want to get more involved with WordPress. If you’ve never written a line of code in your life but have a blog and want to try it, pick a few talks from the Intermediate track. If you’re a business owner who needs a new website and you’re not quite sure where to start, spend the day in the Beginner track to learn what you can do with WordPress. There’s also going to be a help desk at WordCamp Nashville this year. So if you have a question and don’t really know who to ask – come to help desk and there will definitely be someone there who can help.

WordCamps are also a great place to network.

Need somebody to build you a website? A developer that needs a new job? Come to WordCamp. At WordCamp Atlanta this year, there were literally people walking around with signs and t-shirts that said “Talk to me. I’m hiring.” and “I’m looking for content creators.” If you’re that business owner that needs a new website or something built onto your existing WordPress website, WordCamps are filled with developers who do freelance work. My experience at WordCamps has been this: there are always people looking to hire, and there are always people looking to be hired.

You get a free t-shirt, coffee, snacks, lunch, and beer for $20.

Yep. There’s always coffee and some sort of muffins in the morning. Lunch is usually catered in. And there’s always coffee. Apparently developers run on coffee. Oh, yeah. Then there’s the after party. After a fun-filled day of WordPress awesomeness everyone gets together at a bar/restaurant. This year for WordCamp Nashville, that means the Flying Saucer. There’s usually a tab that’s paid for by your WordCamp ticket that will get you some food and/or beer. You get to hangout and relax with everyone else that came to the conference that day. Have a question about a talk earlier in the day and didn’t get to ask your question? The speaker will probably be there, go ask them! The after party is also a great time for that networking I mentioned earlier in a more relaxed, casual environment.

So what’s this about it changing your life?

When I went to my first WordCamp, I was just getting my feet wet in coding. I was self-taught, inexperienced and insecure about my abilities. WordCamp exposed me to a lot of people – some lightyears ahead of me, some on my level, and some behind me. I saw someone on the intermediate track I think do a talk about something that I knew how to do and understood well. That was a little bit of validation for me that I was, at least sometimes, “doing it right.” I also was currently working on the largest, most complex site I had built to date and wasn’t sure how to attack a problem. I started talking to some of the people that knew more than I did and was able to ask them how they would handle that issue. There was some stuff that went over my head, but I was able to see the problem from a new angle and work out a solution.

That experience of getting validation for what I had been doing combined with being able to learn from those more experience than myself was fantastic. It caused me to get more involved with the Nashville WordPress community, go to the developers breakfast, attend WordCamp Nashville. I wanted to make WordPress my career so I dove in to the local community to learn everything I could about WordPress. I’ve met a lot of new friends, landed freelance projects worth tens of thousands of dollars through networking, and also was hired at my current full time job because of my local WordPress community. All of this started with WordCamp.

I’m not saying WordCamp will change your life, but it’s definitely had an impact on mine for the better. Plus it’s just fun to go to. Meet new people. Hangout. Get a free t-shirt. Go out to a bar later. I can’t think of a reason you shouldn’t go to a WordCamp. So go ahead and get your ticket now.

Vagrant and WordPress

Guys (and girls).

I’m deleting MAMP from my computer. It’s toast. History. Trash emptied.

You’ve probably heard rumblings around the internet of Vagrant. If you don’t already know, it is a piece of software you can install on your computer to create virtual development environments. It uses something like VirtualBox to easily create virtual servers that you can use for local website development. It’s similar to MAMP but on steroids. I’ve been telling everybody in our Nashville WordPress developer meetups about using Vagrant and I’m hoping to convert a few MAMP users.

You can create as many of these local “servers” as you want, called boxes, which makes it super-useful for mimicking the final destination of your web project. This is great for making sure that your website won’t face-plant when you deploy to your client’s server. The good news is that you can find tons of these vagrant boxes pre-built and ready to go: here and here

I’m not going to do a tutorial on how to set it up because it has been done several times by people smarter than myself. But I will get you pointed in the right direction. If you’re not concerned with the specifics, here’s the tl;dr version.

That’s cool, so where do I start?

Vagrant

When I first started researching, I saw loads of references to the command line and, admittedly, got a little freaked out. But I quickly saw that the great folks at 10up, who I’m pretty sure are hiring, had created their own tool called Varying Vagrant Vagrants (VVV), now an open source project, and hosted it over on GitHub. They also had pretty good instructions in the readme file on how to get up and running: The First Vagrant Up.

It did take me about 30 minutes to setup from start to finish – there’s a lot to download the first time – but overall it was pretty easy. VVV comes pre-loaded with everything you need to start developing on WordPress locally. It even creates entries to your computer’s hosts file so you don’t have to use a local IP address to access sites (127.0.0.1/wp-admin) and can use something sane like mycoolproject.dev.

VVV has four installations of WordPress by default:

  • http://local.wordpress.dev/ for WordPress stable
  • http://local.wordpress-trunk.dev/ for WordPress trunk
  • http://src.wordpress-develop.dev/ for trunk WordPress development files
  • http://build.wordpress-develop.dev/ for the version of those development files built with Grunt

Then it also comes with a dashboard for your VVV install that lives at http://vvv.dev/. The dashboard provides links to all of the default WordPress installations as well as links to the built in VVV tools such as phpMyAdmin, phpMemcachedAdmin, Opcache Status, Webgrind, and PHP Info.

Ok. Now what?

Now that you have VVV installed you can stop there if you want and start building a site at local.wordpress.dev. Or you can keep reading and find out how to pimp out your VVV install.

Variable VVV

That’s what I thought.

If you’re like me, you think that just developing one site at a lame local URL is well…lame. It’s totally possible to set up other WordPress installs with the VVV default setup but there’s a tool that makes doing just that SO much easier. Enter Variable VVV (VarVVV) from @bradparbs. Again, there are great instructions for installation on the project’s GitHub page so I won’t go through that process.

With VarVVV you can get a new WordPress installation up and running with vv -c. That’s it. It runs through it’s site creation wizard and allows you to specify several options like:

  • Site title
  • Site directory
  • Domain
  • Version of WordPress
  • Multisite install
  • Debugging options
  • Whether or not you want dummy content
  • Specify a git repo for wp-content

There are a lot of other cool features that I haven’t fully explored. Like being able to setup “Blueprints” which allow you to specify plugins, themes, mu-plugins, options, or constants to be installed on each new site created with VarVVV.

That’s great but that dashboard…

VVV DashboardI know, the default dashboard of VVV leaves a lot to be desired. That’s when I turned to VVV-Dashboard from @leogopal. VVV-Dashboard is much easier on the eyes and it integrates with the VarVVV site creation wizard to keep track of all of your WordPress installations. It also provides links to each admin dashboard and front-end for each site. It maintains the links to the built in VVV tools (phpMyAdmin, etc.) and also lists out some common Vagrant commands.

What else you got?

That’s about it. There are some points I know I didn’t talk about, like how vagrant can be used to standardize local development environments for a team of developers. Again, this is just the way I have it set up and it works great for me. If you think I’ve missed something in this post feel free to tell me in the comments. How are you guys using Vagrant in your process?

TL;DR

NextGen Gallery Tweet and Like Buttons

If you’re like me, you love most features of the NextGen Gallery WordPress plugin. Most. You also probably think that there are several features missing from the plugin. One such “missing” feature is the lack of a unique URL (other than the direct image path) for a single image. And if you don’t have a unique URL for each image, how can you share a link to that specific image across your social networks? I’ve worked out a way to achieve this without modifying the core NextGen Gallery plugin files.

Since the documentation on this plugin is pretty scarce, it can be difficult to figure out how to do something. So forgive me if there is a better/existing way to do this with the plugin as-is.

Here we go.

Getting Started

First things first. Go download a copy of the NextGen Gallery plugin from the repository and install it in WordPress. Next, you’ll need to make a new folder in your theme directory named “nggallery.” Now you need to copy “gallery.php” and “singlepic.php” from plugins>nextgen-gallery>view and paste it in the “nggallery” folder you just made. Also you’ll need to set up a gallery with a few photos so we have something to work with.

Next we need to make a page template that is going to serve our single image to the user. I named my template “Single Image.” Then go add a new page, make note of the page ID and set the page to use our new page template. (If you need a refresher on creating page templates, check out Pages in the Codex). We’ll add some more content to our page template in a little bit.

Edit Gallery.php

Now open up “gallery.php” (in your theme folder>nggallery) and we’re going to add a link at the end of the image caption. Line 42 should read:

<a href="<?php echo $image->imageURL ?>" title="<?php echo $image->description ?>" <?php echo $image->thumbcode ?> >

Change that line to read:

<a href="<?php echo $image->imageURL ?>" title="<?php echo $image->description ?>"><strong><a href="<?php echo get_page_link(pageID); ?>?pid=<?php echo $image->pid;?>">Share Image</a></strong>" <?php echo $image->thumbcode ?> >

Replace “pageID” with the ID of the page using the “Single Image” template we created. Notice the “<” sequences, you need to use these for the greater than, less than, and quote characters, otherwise they’ll break the <a> tag we’re working within. The “?pid=pid;?>” bit is what pulls the image id and adds it to the url of the “Share Image” link so we can access it from our “Single Image” page.

Edit Single Image Page Template

Now it’s time to edit the “Single Image” page template that we created earlier. Where you put the following code depends on the structure of your site but I just put this code inside my “content” div. The first thing we need to do is use $_GET to grab the pid value from the URL we sent from gallery.php.
$pid = $_GET["pid"];

Next, since the only thing we should ever be getting here is a number, let’s sanitize the value to make sure nobody is trying to inject any php code into the site. This line should be sufficient enough:

$pid = ereg_replace("[^0-9]", "", $pid);

Now we need to make sure that the picture ID we have is valid. We’ll do this by checking the output of NextGen Gallery’s [singlepic] shortcode.

$shortcode_output = do_shortcode('[singlepic id="' . $pid . '" w="" h=""]');
if ($shortcode_output=="[SinglePic not found]"){
<span class="indent">// Some error message because that picture ID doesn't exist.</span>
}else {
<span class="indent">echo $shortcode_output;</span>
}

Since the [singlepic] shortcode always returns the string “[SinglePic not found]” we can check to see if the shortcode output equals that string and serve the user an error message. If it doesn’t equal that string that means the picture ID is valid and we’ll go ahead and echo the result of the do_shortcode function.

So now if you view your gallery and launch the slideshow you should see the “Share Image” link in the caption. Clicking that link should open a URL something like:

http://www.brettshumaker.wpengine.com/images/?pid=3

Great. Now let’s add the Facebook ‘like’ and Twitter buttons.

Add Facebook and Twitter Buttons

Open up “singlepic.php” (from your theme folder>nggallery) and look for the line:

<?php if (!defined ('ABSPATH')) die ('No direct access allowed'); ?><?php if (!empty ($image)) : ?>

Just below that line, add the following code necessary for the Facebook ‘like’ button:

<?php if (is_page('80')){?>
<div id="fb-root"></div>
<script>(function(d, s, id) {
<span class="indent">var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=xxxxxxxxxxxxxx";
fjs.parentNode.insertBefore(js, fjs);</span>
}(document, 'script', 'facebook-jssdk'));</script>

The “appID=” will need to have your appID from Facebook (https://developers.facebook.com/). Next I set up

<div class="social">

to place the social share buttons. Now to get the URL I created to play nice with Facebook, I had to add “index.php” before “?pid=3.” For some reason, Facebook kept dropping ?pid=3 and I was left with linking “http://www.brettshumaker.wpengine.com/images/” which is not what we want.

<div class="fb-like" data-href="<?php echo the_permalink();?>index.php?pid=<?php echo $image->pid;?>" data-send="false" data-layout="button_count" data-width="80" data-show-faces="false"></div>

I used “the_permalink()” to start off the URL; then added “index.php?pid=” and echoed the picture id with “$image->pid” to complete it. You can change the data-layout, data-width, and data-show-faces values to fit your site, these are the ones that worked for me. That wraps up the Facebook ‘like’ button. On to Twitter, which was much easier:

<a href="https://twitter.com/share" class="twitter-share-button" data-url="<?php echo the_permalink();?>index.php?pid=<?php echo $image->pid;?>" data-lang="en">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

There are a lot of other options you can add to a Twitter button but I won’t go into that here.

That’s About It

One other side-note: If you’re curious to see what the NextGen Gallery $image object actually holds you can use “print_r($image);” and it will spew out every attribute contained in $image.

I think that wraps it up. If I’ve left anything out or you see a better way to do something, let me know!

Edit

Here is the full code for the ‘single-image.php’ Single Image page template:

<?php
/*
Template Name: Single Image
*/
?>
<?php
get_header(); ?>
<span class="indent"><div id="primary">
<span class="indent"><div id="content" class="container" role="main">
<span class="indent"><?php
$pid = $_GET["pid"];
$pid = ereg_replace("[^0-9]", "", $pid);</span></span></span>
$shortcode_output = do_shortcode('[singlepic id="' . $pid . '" w="" h=""]');
if ($shortcode_output=="[SinglePic not found]"){
<span class="indent">echo ("No picture here");</span>
}else {
<span class="indent">echo do_shortcode('[singlepic id="' . $pid . '" w="" h=""]');</span>
}?>
</div><!-- #content -->
</div><!-- #primary -->
<?php get_footer(); ?>