WordPress-Christmas-2010-10

Remove Inline Style Of WordPress Gallery Shortcode

Today I'll give you a small tip for the WordPress Gallery. With version 3.1 of WordPress it is possible to replace the inline style of the core, it's done easily with a Filter-Hook. Use this and include your custom style with the Theme in your frontend; no Plugins, CSS or functions in your Theme for this required - easy, but it works and this is the greatest part of WordPress - Hooks for everyone, everywhere
Continue reading …

WordPress-Christmas-2010-04

Advent Calendar – Predefined callback functions for filters

Filters are often used for removing content. For example, if you want to hide the admin bar you can do the following:

function hide_admin_bar() {
    return FALSE;
}
add_filter( 'show_admin_bar' , 'hide_admin_bar' );

It's a bit tedious to define an additional function just to return "FALSE". Since version 3.0 WordPress provides various functions to shorten the code:

  • __return_true()
  • __return_false()
  • __return_zero()
  • __return_empty_array()

The above code can now be written as

add_filter( 'show_admin_bar', '__return_false' );
WordPress-Christmas-2010-03

Extend the TwentyEleven Navigation with your Social Icons

TwentyEleven Screenshot

In this little tutorial we show how to add in the navigation of the TwentyEleven Theme our RSS Feed, a link with icons to our Twitter page and to our Facebook profile. Without writing a single line of PHP code. You are able to accomplish this with the WordPress Menu.

First we go in the backend to Design-> Menu and activate the CSS Classes. Therefore we click on "Screen Options" on the very top right corner. And unter "Show advanced menu properties" you check the box for "CSS Classes" and close the Screen Options.

WordPress menu screen options

After that we use the "Custom Links" to create the menu entries. We add the addresses to our RSS Feed, Facebook and Twitter and add them to the menu. There we assign the 3 menu entries to the CSS Classes. RSS Feed has the class rss, Twitter the class twitter and Facebook facebook. Don't forget to save.

WordPress Menu

I prepared a sprite, which you can download with a right mouse click->Save Image As… . You have to save this sprite into the folder twentyeleven/images/.

Social Sprite

Then we open the file TwentyEleven style.css with a text editor and add at the end of the Menu block #access our additional CSS. We do not have much to add. We let our 3 list items float to the right, push the text out of view and position the graphic. Only for the hover, focus and active states, we must define a little tricky CSS rule in order to circumvent the background gradients of TwentyEleven.

#access .twitter, #access .rss, #access .facebook {
	float: right;
}
#access .twitter a, #access .rss a, #access .facebook a {
	background: transparent url(images/social-sprite.png) 0 0 no-repeat;
	padding: 0;
	text-indent: -9999px;
	width: 70px;
}
#access .rss a { background-position: 0 0; }
#access .facebook a { background-position: 0 -96px; }
#access .twitter a { background-position: 0 -48px; }
#access .rss a:hover, #access .rss a:focus, #access .rss a:active {
	background: transparent url(images/social-sprite.png) 0 -144px no-repeat;
}
#access .twitter a:hover, #access .twitter a:focus, #access .twitter a:active {
	background: transparent url(images/social-sprite.png) 0 -192px no-repeat;
}
#access .facebook a:hover, #access .facebook a:focus, #access .facebook a:active {
	background: transparent url(images/social-sprite.png) 0 -240px no-repeat;
}

This is just an example to experiment. Add your Google+ profile and expand this example with cool CSS tricks!

Force Reload of Scripts and Stylesheets in your Plugin or Theme

If you're developing a WordPress theme or plugin you may have had the problem that scripts or stylesheets are not reloaded from the source when you refresh the page because they are cached somewhere on the way from the server to the browser. There are various methods to suppress this behaviour like disabling the browser cache in the options or by using a web development add-on. Sometimes this simply does not work because it's not always apparent where the content is cached since there are so many possibilities and you may have missed to disable all of them.

WordPress provides a simple method to ensure that all stylesheets and scripts are reloaded from the source when they have changed by providing a version parameter:

wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );
wp_enqueue_style( $handle, $src, $deps, $ver, $media);

You can increase the $ver parameter every time you've changed the files:

wp_enqueue_script( 'my_script', 'my_script.js', '', '0.11' );
wp_enqueue_style( 'my_style', 'my_style.css', '', '0.11' );

The URL of the stylesheet/script will be changed to '.../my_script.js?ver=0.11' so that every caching system detects the changed file and reloads it from its source and the user always gets the recent version.

But to change the version number manually every time in the development stage would be a bit tedious and you're a programmer, right? So let's automate this:

wp_enqueue_script( 'my_script', 'my_script.js', '', time() );
wp_enqueue_style( 'my_style', 'my_style.css', '', time() );

The value of time() changes every second so the version ID of the file changes constantly and it's reloaded from the source and not from some cache.

It's a bit disadvantageous that you have to substitute the time based version parameter by a "real" version number every time you deploy your code since the actual user still should have the benefits of cached scripts and stylesheets. Let's extend the idea:

define ('VERSION', '1.1');

function version_id() {
  if ( WP_DEBUG )
    return time();
  return VERSION;
}

wp_enqueue_script( 'my_script', 'my_script.js', '', version_id() );
wp_enqueue_style( 'my_style', 'my_style.css', '', version_id() );

This way you can make sure that in your development environment everything is reloaded from source all the time but a productive server takes advantage of caches.