There are 150,000 lines of code in WordPress

The King James Bible has just shy of 80,000 lines of text

Hamlet has only 4,000.

WP Ultimate Search

Check out my newest plugin… WP Ultimate Search. It’s the first ever ajax-enabled faceted search plugin for WordPress. Right now it can only facet by category, but when we launch the premium version there will be an interface where you can enable faceting by any custom taxonomy, post meta data, or (advanced) custom field.

Features:

  • Searches post title and body content
  • Can search by multiple keywords, and by full phrases
  • Highlights search terms in results
  • Searches inside of shortcodes
  • Option to send search queries as events to your Google Analytics account
  • Facets by post category
  • Can search in multiple categories (OR search)
  • Category options are dynamically generated and autocompleted as you type
  • Attractive and lightweight interface based on jQuery, Backbone.js, and the VisualSearch.js library
  • Bypasses WordPress’ built-in search functions and conducts direct database queries for low overhead and high flexibility

Try a demo:

Search with plain text, or begin typing “category” to facet by categories: (my site’s especially overloaded these days, so results may be slow, but this isn’t the norm)

How to include a custom stylesheet on a WordPress options page

(or, “how to put a bunch of error messages in a blog post for effortless traffic”)

Let’s start with what doesn’t work, beginning with including the options page file itself:

If you’re defining a base URL for your includes, for example define('PLUGIN_BASE', plugin_dir_url( __FILE__ ));, you won’t run into any problems enqueuing scripts and stylesheets.
wp_enqueue_style( 'plugin-style', PLUGIN_BASE. 'css/plugin-style.css'); will work fine.
But don’t think about trying to include( PLUGIN_BASE . 'plugin-options.php');, you’ll get a friendly:
Warning: include() [function.include]: URL file-access is disabled in the server configuration
(It seems like include( 'plugin-options.php'); works, but I don’t think it’s the best way to go about it).

If we were suspicious of PLUGIN_BASE before, we’ll quickly progress to dismay and anger once we try to use it in plugin-options.php. A simple call to wp_enqueue_style( 'options-style', PLUGIN_BASE. 'css/options-style.css'); gives us this bizzarre error in the console:

Failed to load resource: the server responded with a status of 404 (Not Found) http://mystagingsite.mysite.com/wp-content/plugins/http://mystagingsite.mysite.com/wp-content/plugins/my-plugin/css/options-style.css?ver=3.4.1

Ok, so maybe the PLUGIN_BASE constant isn’t valid inside of a different class, or something. Let’s forget the definition and just put plugin_dir_url( __FILE__ ) there instead.

Nope.

plugin_dir_path(__FILE__)?
Nope.
dirname(__FILE__)?
Nope.
trailingslashit( dirname( $file ) )?
Nope.
plugin_dir_url( $file )?
Nope.
plugin_basename(__FILE__)?
Nope.
realpath( dirname( __FILE__ ) )?
Nope.
basename(dirname(__FILE__))?
Nope.

What eventually ended up working, though I still couldn’t tell you why, is wp_enqueue_style( 'options-style', plugins_url('/options-style.css', __FILE__) );

So if you got here with any of those errors above, I hope this has helped you out.

Cheat Sheet for the WordPress bundle in TextMate

There wasn’t one of these already, so I made one. Based on the WordPress TextMate Bundle by Shawn Parker & Top Frog Graphics.

GDE Error: Unable to load profile settings

jQuery Notify

jQuery Notify

I released my first WordPress plugin yesterday, jQuery Notify. It’s a lightweight and highly configurable jQuery notification pane that will appear after a page loads. It can be inserted into a page or post by either using a shortcode or template tag, and is smart enough to only load on pages it’s needed on.

I created this as an opportunity to learn more about WordPress’ action/hook/filter system for my upcoming presentation at Wordcamp 2012. The entire plugin is wrapped in a class to avoid variable/function naming conflicts, and it only loads on pages where the shortcode is actually called. All styles and scripts are registered through wp_enqueue_script and wp_enqueue_style, and data is passed between the plugin and the scripts using the localize_script function.

Check out a demo of the plugin, or install it on your own site.

JQuery Dropdown Message on First Login

I wanted to have a sliding dropdown (Twitter style) displayed to my users after logging into a WordPress site for the first time.

Had to hack this together from a few different sources, so I’m posting the results here in case anyone else is trying to do the same:

Step 1: Display a welcome message to a recently-registered wordpress user (but hide it for older users).

I got most of this info from this post on the WordPress.org support forums, but there was a typo in the code that made it not work.

In your theme’s functions.php

  1. function my_show_extra_profile_fields( $user ) {
  2.  
  3.  global $user_ID;
  4.  if( $user_ID ) {
  5.   $user_info = get_userdata( $user_ID );
  6.   // If user_registered date/time is less than 48hrs from now
  7.   // Message will show for 48hrs after registration
  8.   if ( strtotime( $user_info->user_registered ) > ( time() - 172800 ) )
  9.    echo 'This text only appears to new users';
  10.  }
  11. }

This function inserts the code into the user’s profile page… which is where they’re directed after they log in. I’m using Theme My Login by Jeff Farthing to theme my login and profile pages. The message will display for the first 48 hours after registration, then disappear.

Step 2: Make a nice JQuery slide-in type message box.

  1. <script type="text/javascript">
  2.    $(document).ready(function(){
  3.     $("#notification").slideDown("slow"); //< — this is the animation code
  4.     $("#first_name").addClass("selected");
  5.     $("#last_name").addClass("selected");
  6.    });
  7.    </script>
  8. </script>

This takes any DIV with ID “notification” and slides it down, slowly. The .addClass is specific to my implementation… it highlights the First Name and Last Name fields, to invite the user to fill them out.

Finally, you’ll want to style #notification. Make sure to set its display: property to none

  1. #notification {
  2.  position: absolute;
  3.  top: -20px;
  4.  left: 0px;
  5.  height: 85px;
  6.  width: 100%;
  7.  background: #ffffe0;
  8.  display: none;
  9.  line-height: 10pt;
  10.  font-family: sans-serif;
  11.  padding: 5px 10px;
  12. }

Putting it all together, you have (in my case):

And the code:

  1. function my_show_extra_profile_fields( $user ) {
  2.  
  3.  global $user_ID;
  4.  if( $user_ID ) {
  5.   $user_info = get_userdata( $user_ID );
  6.   // If user_registered date/time is less than 48hrs from now
  7.   // Message will show for 48hrs after registration
  8.   if ( strtotime( $user_info->user_registered ) > ( time() - 172800 ) )
  9.    echo '
  10.   <script type="text/javascript">
  11.  
  12.   $(document).ready(function(){
  13.    $("#notification").slideDown("slow"); //< — this is the animation code
  14.    $("#first_name").addClass("selected");
  15.    $("#last_name").addClass("selected");
  16.   });
  17.  
  18.   </script>
  19.   ';
  20.  }
  21.  ?>
  22.  <div id="notification">
  23.   <center><strong>Hey! I see you're new here!</strong> Thanks for registering, and welcome to <strong>evolutionary collective!</strong><br /><br /></center>
  24.  <span style="line-height: 30px;"><img src="/wp-content/themes/twicet/images/edit.png" style="float: left; margin-right: 10px;"/>You might consider filling out <strong style="color: #f79d34">a little more information about yourself</strong> below <br />
  25.  
  26.  <a href="/forum"><img src="/wp-content/themes/twicet/images/forum.png" style="float: left; margin-right: 10px;"/></a>Or, head over to the <a href="/forum">forum</a>, and participate in a discussion!</span>
  27.  
  28. </div>
  29. < ?php
  30.  
  31. }

[highlight]UPDATE:[/highlight]
Also, I thought this would have been pretty obvious, but remember you must include jQuery somewhere in your page, preferably in the header. The easiest way to do this is:

  1. <script src="http://code.jquery.com/jquery-1.4.4.js"></script>

Of course you don't want to include an external file on a live site— but this works for testing purposes.

Conditional Loading Facebook Scripts

I’m working on a client project currently which employs a “Like” button on each of the post pages– but nowhere else on the site. You can see here, Facebook requires 253.2 KB worth of scripts (54% of the entire page!) and adds 2.73 seconds to the page load time (52% of the time).

I’m using the Simple Facebook Connect plugin for the Like button.. so I went into the sfc-base.php file in the plugin’s folder, and tried to find a way to prevent the plugin from loading on non-post pages. After a bit of trial and error, I eventually added a conditional if is_single() to the Facebook script loading function (see line 9 below).

  1. // load the FB script into the head
  2. add_action('wp_enqueue_scripts','sfc_featureloader');
  3. function sfc_featureloader() {
  4.  if (is_single()){
  5.   if ($_SERVER['HTTPS'] == 'on')
  6.    wp_enqueue_script( 'fb-featureloader', 'https://ssl.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/'.get_locale(), array(), '0.4', false);
  7.   else
  8.    wp_enqueue_script( 'fb-featureloader', 'http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/'.get_locale(), array(), '0.4', false);
  9.  }
  10. }

Now the Facebook script only loads on individual posts, and the rest of the site is 3 seconds snappier!

Universal-Video Plugin Troubleshooting

I’ve been using Rob McGuire’s Universal Video plugin for WordPress to handle the videos on this site.. which is great because it’s HTML5 based, but reverts to a Flowplayer flash player for older browsers.

I had a few problems getting video to play in any browser other than Chrome, so I’m providing my fixes below, in case anyone else runs into similar problems:

HTML5 video won’t load in Firefox/Safari

Make sure the ogv mime types have been added to your Apache configuration. You can add to your httpd.conf:

AddType video/ogg .ogm
AddType video/ogg .ogv
AddType video/ogg .ogg

Or, in your hosting control panel, look for a MIME type option, and add

MIME type: video/ogg
Extensions: ogg ogv ogm

If videos still don’t play, try relocating the Flowplayer .swf from /plugins/universal-video/player/ to /plugins/universal-video/. On line 34 in universal-video.php, make sure you change the path to the .swf:

  1.  $plpath = $wp_url .'/flowplayer-3.2.1.swf';

Flowplayer doesn’t load video file in IE

For me, the flash object would load, but right clicking on it would display an error: “Movie not loaded”. I fixed it by specifying an absolute path to the .swf in universal-video.php. So, for me, my line 34 read:

  1.  $plpath = $wp_url .'http://www.brycecorkins.com/wp-content/plugins/universal-video/flowplayer-3.2.1.swf';

WordPress 3.0 Upload Image Fix

After upgrading to WordPress 3.0, I could no longer upload media in the visual editor. Instead of popping up in the lightbox, a whole new page would load, and no images would attach to posts.

In the Headspace2 plugin… go into /wp-content/plugins/headspace2/js and open the headspace-tags.js file. Around line 67 (function get_tag_element () {) change what’s there to the following:

  1.     function get_tag_element () {
  2.       if ($('#tax-input-post_tag').length == 1)
  3.         return '#tax-input-post_tag';
  4.       else if ($('#tags-input').length == 1)
  5.         return '#tags-input';
  6.       else if ($('#tax-input\\[post_tag\\]').length == 1)
  7.         return '#tax-input\\[post_tag\\]';
  8.     }

Refresh a couple of times, to clear your browser’s cache, and try and attach an image. The usual popup window should now load.

(If you don’t have Headspace2 installed.. maybe it’s some other plugin interfering..?)

Thanks to Aaron Campbell. Found at the Headspace bug tracker.

Center align a WordPress Image Gallery


I’ve been trying for the last day or so to center align the default WordPress image gallery within a page– without any luck. Finally figured it out this morning, here’s how I did it:

  • Modify include/media.php to remove the gallery styles (this will stop them from overriding our custom style). Around line 738, you’ll see something like:
  1. $output = apply_filters('gallery_style', "
  2. <style type='text/css'>
  3. .gallery {
  4.       margin: auto;
  5. }
  6. .gallery-item {
  7.       float: left;
  8.       margin-top: 10px;
  9.       text-align: center;
  10.       width: {$itemwidth}%;
  11. }
  12. .gallery img {
  13.       border: 2px solid #cfcfcf;
  14. }
  15. .gallery-caption {
  16.       margin-left: 0;
  17. }
  18. </style>
  19. <!– see gallery_shortcode() in wp-includes/media.php –>
  20. <div class='gallery'>");
  • Change this to:
  1. $output = apply_filters('gallery_style', "
  2.       <style type='text/css'>
  3.              #{$selector} img {
  4.                     border: 2px solid #cfcfcf;
  5.              }
  6.              #{$selector} .gallery-caption {
  7.                     margin-left: 0;
  8.              }
  9.       </style>
  10.       <!– see gallery_shortcode() in wp-includes/media.php –>
  11.       <div id='$selector' class='gallery galleryid-{$id}'>");
  • Now in the stylesheet for your theme, add the following:
  1.  
  2. /* MODIFIED CENTER-ALIGNED GALLERY */
  3.  
  4. .gallery {
  5.        clear: both;
  6.        margin-bottom: 10px !important;
  7.        float: right;
  8.        position: relative;
  9.        left: -50%;
  10. }
  11. .gallery br {
  12.        display: none;
  13. }
  14. .gallery-item {
  15.        margin-right: 15px;
  16.        width: auto !important;
  17.        display: inline-block;
  18.        left: 50%;
  19.        margin-top: 10px;
  20.        position: relative;
  21. }
  22. .gallery-icon img {
  23.        height: 75px;
  24.        width: 75px;
  25.        border: solid 1px #ccc !important;
  26.        padding: 5px;
  27.        background: #f4f4f4;
  28. }

The floats and +/-50% adjustments were taken from this guide to centering floated CSS elements. I don’t honestly know how compatible this is, or whether it’s up to standards, but it works for me.