Mostly about my amusement

Category: Software (page 4 of 22)

WordPress actions and filters are still very cool

I spend time perusing the WordPress support forums (now that’s an understatement) and sometimes I come across someone being unhappy with a plugin. In this particular case a plugin was adding a notice to the admin screens saying “Upgrade now for only $24”.

I really have nothing against plugin authors deriving income that way but I prefer that messages like that in my WordPress dashboard be dismissible. That dashboard real estate is mine and I just don’t like to share.

The plugin adds that message using this code.

add_action( 'admin_notices', 'emg_upgradepro_message' );

WordPress actions and filters are a wonderful thing. It’s a queuing mechanism meaning that the order that your PHP code loads or is executed does not matter. What matters is that actions (or filters) get added to the queue and executed in priority order.

That add_action() does not have a priority so it defaults to 10. Actions that are added that way can be removed too but you have to have that remove_action() in the queue after the action is added. You can’t remove it before it’s added.

I was able to easily (took me 3 minutes) by creating another plugin that just removes that action like so.

<?php
/*
Plugin Name: Remove Easy Media Gallery Upgrade Notice
Version: 0.1
Description: This plugin removes the Easy Media Gallery Upgrade notice in the WordPress dashboard.
Author: Jan Dembowski
Author URI: http://blog.dembowski.net/
*/

add_action( 'admin_init', 'mh_no_upgrade' , 15 );
function mh_no_upgrade () {
        remove_action( 'admin_notices', 'emg_upgradepro_message' );
}

And that’s it. The priority 15 should make it run after the action that adds that message and it does: the message is gone. This may not be the best way to do it but it’s an easy 3 minute fix.

Keep in mind that I don’t use this plugin on my main blog but exercises like this one just show how easy it is to extend WordPress.

Better living through WordPress filters

codex

Every now and then you find an interesting support question in the WordPress forums. A member wanted to take the HTML YouTube oEmbed code and modify it to suit his needs.

It was an easy set of requirements.

  1. Replace ?feature=oembed with ?wmode=transparent
  2. Append add wmode=”Opaque” to the end of the start iframe tag

My solution was to find all of the embeded YouTube <iframe…> tags in the post and modify the_content via a filter with some preg_match_all code.

You can see the code I came up with via this pastebin.com link.

It’s a nice enough solution and really highlights the point I was trying to make:

You do not have to hack existing code in WordPress to get the results you want.

Just use the available WordPress filters to modify the output as you need.

Jan? You do know you got that completely wrong right?

Yes. Yes I do. Well maybe not completely wrong but the code I posted was not the best solution.

I filtered the content because I’m used to playing in that space and it’s so easy to do. But my solution did not work for the person asking because what he was referring to did not output via the_content. He had to add another filter to make it work.

The original question was about how to modify oEmbed output. That’s a completely different filter and using the right one gets you a targeted solution that will work (should work anyways) at any place the oEmbed output is used.

Last year Mika Epstein posted a plugin called Rickroll that does exactly what it sounds like. It takes oEmbed video and replaces it with the Rickroll video.

You can learn a lot looking at other people’s code. It also has exactly what I needed to examine and make the modification to the YouTube oEmbed html.

Here’s the new code in a plugin.

add_filter('embed_oembed_html','mh_adjustyoutube',10,3);
function mh_adjustyoutube( $html, $url, $args ) {
if ( strstr($url, 'youtube.com') ) {
	// Replace ?feature=oembed
	$mh_new = str_replace( "?feature=oembed" , "?wmode=transparent" , $html );
	// Append wmode="Opaque"
	$mh_new = preg_replace( '/></iframe>$/' , ' wmode="Opaque">' , $mh_new );
	$html = $mh_new;
}
// Modified or not return $html
return $html;
}

This has fewer lines, simpler logic, and it is a solution that specifically filters the oEmbed output. It directly addresses the original question and can be used where ever the oEmbed code gets outputted.

You can see an easier to read version via this new pastebin.com link.

The lesson I learned is this: using WordPress filters is a powerful feature but using them correctly is even better.

Jetpack Carousel for Themify themes

This is probably documented somewhere but I’m posting it here so I don’t forget (again).

I wanted to give Jetpack’s Carousel module a spin but the built in Themify Pretty Photo lightbox kept getting used instead.

To disable the PrettyPhoto lightbox add these lines to your child theme’s functions.php file.

add_action('wp_enqueue_scripts', 'mh_remove_pretty_photo', 20);
function mh_remove_pretty_photo() {
        wp_dequeue_style( 'pretty-photo' );
        wp_dequeue_script( 'pretty-photo' );
        wp_deregister_script( 'themify-carousel-js' );
}

That will let another lightbox be used instead such as Jetpack’s Carousel. The 20 argument in the add_action() is to make sure my function gets queued after the parent theme function.

Or center embedded tweets with just CSS

After my earlier post on “Centering embedded tweets in WordPress” I’d gotten a reply from Ipstenu and Otto on Twitter.

Customizing how tweets are displayed is not a new problem. 😉

This got me taking a second look at the CSS of an embedded tweet. With Firebug you can inspect just about any items properties and I found the rule quickly.

I’m still picking up CSS knowledge all the time and I always forget about !important.

That tag lets you override rules even when it the normal CSS should get precedence. Which is why when I tried this in CSS previously it didn’t work for me, the rule I added was missing that tag. Read more

Centering embedded tweets in WordPress

Update: While the below solution is fun and works, it’s a little heavy handed code-wise. It’s easier to modify the presentation of the tweet using CSS which I explain in the next post.

A better solution is probably documented somewhere, but this worked for me and more importantly I had fun.

I was reading a blog post and noticed that the embedded tweets there were centered neatly and were not the same width as my own embedded tweets. The ones that I had inserted were left justified and had a 550px width.

I’d never liked the styling of my tweets, but all I was doing was pasting the tweet URL into the editor. I wasn’t pasting in the code from Twitter, WordPress was retrieving it for me via oEmbed.

I looked at the source of that page and noticed that the other blog post had added an additional CSS class to the tweet called tw-align-center and the hard-coded width=”550″ was removed.

That’s not surprising because when you visit Twitter’s page on embedding tweets, you can see the options for alignment. But how to do it in WordPress?

Read more

Get Your Tin Foil Hats Right Here!

Update: Sometimes I DO over think a problem and a solution. Which is odd because SSL is also one of my (supposedly!) strong points. Skip to the comments below for something that Andrew Nacin pointed out. 😀

——————————–

Part of my professional life is to think about topics like data leakage. That’s when you do something and, without realizing it, you transmit information that you hadn’t intended to.

For example, my company may have an internal web page with this URL:

And on that page is a link to a NY Times DealBook blog posting as a reference. One of the readers in my company clicks on that link without hesitation. Why wouldn’t they click? That’s what the link is there for.

When Dealbook processes their web access logs, they’ll see a URL as the HTTP referer (I’m spelling it correctly after this) that the company or person who clicked that link may not want them to see.

How to prevent sensitive referrers from being sent from your WordPress blog?

  1. Install and configure YOURLS (svn revision 703). Get that working with a short domain, it’s easy to do.
  2. Install and activate my short Force Javascript Redirection YOURLS plugin. [download id=”1″]The useful bit is only one line.
  3. Install my WordPress Convert Links to Yourls plugin but don’t activate it yet.[download id=”3″]
  4. Modify two lines in that WordPress plugin for your  configuration. Sorry, I’m not up to making an options page (yet).
  5. Active that WordPress plugin.

And poof! the Tin Foil Hat is in place. Any links in your post content or comment text will have their links sent to your very own link shortner and the remote site will only see the short link as the referrer.

Read on to see how it works. Read more

Old content! Now in 3D!

The guys over at Wired re-published their old review of The Phantom Menace but with a difference. Using CSS and duplicating the content they were able to apply a 3D effect.

It’s readable if you have the glasses. And of course, I do have 3D glasses.

Naturally, I tried to do the same just for giggles. I was able to duplicate the content in both red and blue, but the entire container div uses “position: relative” so the height needed to be set manually.

That can be read as: I haven’t figured out the CSS to dynamically overlay text content on top of each other without the comment box sitting on top of the text. I can’t do it the same way as they do at Wired.

Google to the rescue! To get the effect I wanted, I’m using CSS to color the paragraph fonts a shade of blue while making the offset text-shadow red. For links I reverse that so they look different. It’s not a lot of CSS and if you apply it you better have your glasses ready. It’s easy to do but probably doesn’t work right with old browsers.

Forget old browsers. I opted for this simpler method and put the solution into a plugin.

The plugin inserts the necessary CSS into the head and when a post is tagged “Phantom 3D” the_content gets wrapped in a div  with the CSS class “redblue-text”.

Here’s the “Now in 3D!” part

  1. Download, install, and activate a copy of my plugin. It’s a zip archive with one file in it.
  2. Find an old post on your blog and edit it just by adding the tag “Phantom 3D” to the post. The spelling and case are important, the P and D have to be capitalized in the tag or this wont work.
  3. Poof! You’ve just brought new life to an old subject.

For purposes of readability I have not put that tag on this post. Not everyone has 3D classes by their PC.

But I do have an old post titled Adding Slimstats to WordPress from 2007 and that’s a good candidate.

The info in that post is horribly outdated (I mean come on, I recommended editing wp-config.php) and totally unnecessary these days. As indicated today in the comments, there are just better ways to implement Slimstat in WordPress that are supportable.

But we all know that by adding 3D everything is improved. I’ve made that post new and exciting not by updating the content but by simply applying a special effect.

If that’s good enough for George Lucas, then it’s good enough for me. 😀

The best support topics are the ones where I have to stretch

I spend time browsing the WordPress support forums to help out. The majority of requests are from new users who have a problem with a setting, they changed something they shouldn’t have, or an update broke their site.

It’s a very popular software platform and while mundane requests aren’t exciting, when you provide good answers you’re helping someone out. That’s a very cool thing. The answers provided there give someone an assist so that they can get out of a hole they put themselves in.

But the most satisfying topic is when someone is asking how to do something and I have to figure it out to support them. Especially when it involves something that I’m not too good at.

I’m a huge fan of child themes and I use them here on this blog. So when someone asked about modifying the Coraline theme, I was curious enough to ask for clarification. When the person explained by example and I saw that it was related to CSS, I got to work.

Using my test installation, I created a child theme for Coraline. I already had a copy of that theme and I started with what I already knew of CSS. I was close to getting it working but ended up searching via Google for the rest.

Armed with some new CSS information, I was able to get the my test install working satisfactorily and posted the solution. Total time spent was a little over 45 minutes.

Does that seem like a lot of time helping a stranger? It’s not.

I knew that what they were asking for was doable, but I’m horrible at CSS. It’s a creative thing for me and I’m just not good at it. But by helping that person out I was able to learn something new and stretch my own skills a little.

That’s how I learn, doing things that are outside of my experience. My little contribution is not earth shattering but it might help someone out and being able to pickup additional CSS is a bonus.

There are many really talented web designers that fully comprehend CSS and my own level of expertise will not match that. But by my accepting that forum topic as a challenge, I understand a little bit more than I did the night before.

Here’s the reply to my small effort.

You’re a genius, seriously. Thank you!

Concise, I like it. That’s not a bad result at all.

Fun with oEmbed and Twitter

This tweet is being displayed using oEmbed between WordPress and Twitter. This capability was added a few minutes ago after I pasted Otto’s code snippet into my theme’s functions.php file:

That’s pretty remarkable. I’ve embedded a tweet that has an embedded Youtube video in it. I didn’t even bother to wrap the URL in the [ embed] … [ /embed] shortcode, I just pasted in the link to that tweet.

That’s very cool! It shouldn’t be long before this is put into a plugin; I put it into my theme’s functions.php because I’m used to poking in there.

Interestingly enough, when the Twitter Blackbird Pie plugin is activated it overrides the oEmbed output and puts the tweet into that nice format that they use. For now I’ll use the oEmbed option.

I really am limited by my PHP and CSS

As part of purchasing the Elemin theme I get support from Themify and I asked for CSS help on their forum. It’s a good benefit and part of the package.

I was able to get two full posts on the home page and leave the rest as excerpts but the CSS was baffling me. I couldn’t work out how to set the post-meta to format as I wanted it to.

My CSS is at best “not too good” and I was messing up some inherited properties.

The response was good: why not just wrap the posts in divs with the correct class and let the default style.css do the rest? That way the generated output would look kind of like this:

<div class="list-post">
 [post 1]
 [post 2]
</div>
<div class="grid2">
 [post 3]
 [post 4]
 [post 5]
 [post 6]
 [post 7]
 [post 8]
</div>

That was a real light bulb moment for me. I know I can do that by making a copy of the elemin/index.php file into my child theme directory and making modifications.

So that’s exactly what I did and replaced the regular get_template_part() line with this code:

<!-- child mods -->
<?php if( is_home() and $post_layout == "grid2" and $paged < 2 ) {
   $mh_post_count++;
   switch($mh_post_count) {
      case 1: ?>
         </div><!--/loops-wrapper list-post-->
         <div class="loops-wrapper">
         <div class="list-post">
         <?php get_template_part( 'includes/loop','index');
         break;
      case 3: ?>
         </div><!-- /list-post -->
         <div class="grid2">
         <?php get_template_part( 'includes/loop','index');
         break;
      case get_option('posts_per_page'):
         get_template_part( 'includes/loop','index'); ?>
         </div><!-- /grid2 -->
         <?php break;
      default:
         get_template_part( 'includes/loop','index');
   }
} else {
   get_template_part( 'includes/loop','index');
} ?>
<!-- /child mods -->

I also had to put in a conditional right before get_sidebar() to properly close off the last div. Changing the excerpt to the post content is still handled in the child theme functions.php file.

It all works and I’m now using it my child theme. This only gets applied when I select the two column excerpts page format. Switching to anything else restores the default Elemin formatting.

But you copied and edited a theme file!

Yes, I did and I’m thoroughly ashamed of myself.

There are hooks into different parts of the WordPress loop so that I should be able to put into my child theme’s functions.php file the logic to figure out where in the loop we are and insert the HTML as needed.

The logic is dependent on if we’re at post #1, post #3, and the last post defined by the posts_per_page option. So all I need to do is add the appropriate add_filter() or add_action() to my functions.php file. I already add to the_content using a filter for before and after.

But I’m not quite there yet. I’m pretty sure that I can pull it off with something like add_action( ‘the_post’, ‘insert_before_posts’ ) but I’m still doping it out.

I’m also having a great time doing it too which is really the point of all this effort. Now if only that WordPress Bible would get here sooner…