Tag: WordPress (page 4 of 13)

January 19, 2014

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.

February 17, 2013

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.

Replace ?feature=oembed with ?wmode=transparent
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.

February 13, 2013

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.

July 4, 2012

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.

@jan_dembowski You can override it with CSS and !important. I did on a bbPress.

— ipstenu ((Mika 実佳)) (@Ipstenu) July 4, 2012

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

July 4, 2012

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?

March 12, 2012

So! 10 days left to my own devices

After much prodding I have finally convinced Lily to post to her own blog. That intense conversation went like this and took a lot out of me.

Me: You should post articles about what you are doing or topics you like. It’s fun.

Her: Okay.

Me: *blinks*

Her: That looks new. Do you know where I can find good technical support?

Right now she’s on a plane to India on a business trip and she wants to blog about the experience. It’s her second trip and I hope she takes lots of pictures.

Naturally I’m running her blog as part of my multisite installation. Picking a theme was tricky so once she gets the hang of WordPress I’ll encourage her to find one she likes.

You can take a look at her blog at http://lily.dembowski.net/

She’s going to be away for 10 whole days. To commemorate this event our son thought it would be appropriate to spend all night hurling. As a result of those shenanigans I’m mostly sleep deprived today and am amazed that I can even form complete sentences.

Although run-on sentences don’t seem to be a problem for me right now.

10 days. This maybe a good time to order a Olympus 35 RC or XA rangefinder camera…

March 5, 2012

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?

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

February 12, 2012

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

Download, install, and activate a copy of my plugin. It’s a zip archive with one file in it.
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.
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. 😀

February 8, 2012

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.

January 1, 2012

Using WP-PageNavi with the Elemin theme

Update: Added a conditional to ensure that wp_pagenavi() runs once.

The Elemin theme has it’s own built-in page navigation after the posts. It’s attractive, but not quite as flexible as the WP-PageNavi plugin. With this plugin you can put a page counter, link to the start and end pages, etc. It’s a cool add-on and I’ve gotten comfortable using it on my WordPress blog.

Adding support for that plugin to Elemin can be done simply by creating an includes directory for the child theme, and copying the elemin/includes/pagination.php file into the child theme includes directory. You then modify the copy with the wp_pagenavi() code and due to the magic of get_template_part() the child theme will pick that up.

Modifying a copy of a parent theme file isn’t too bad and that file is very small. But that’s not a very interesting solution. What’s more fun is to add support via hooking into the loop.

I’ve made many modifications to my child theme and not once have I had to copy and/or modify one of the parent theme files. For me, that’s the whole point of this exercise: creating a child theme that only uses functions.php and CSS.

So far using that method for this child theme I’ve been able to do the following:

Add a random header image
Made some CSS changes including a page background
Added a fix for Internet Explorer 8 issues
Created a front page view that shows the full content and then the excerpts and without using a front-page.php template

I’m having a great time doing it too. WordPress is very extensible and I’m picking up more and more PHP knowledge as a result of playing with my WordPress blog.

Here’s how I added support for WP-PageNavi to the Elemin theme. Read more