Steffen Rufer
Wordpress: How to exclude categories from showing in blog archive pages

Add the following code in your function.php file:

add_filter( ‘getarchives_where’, ‘customarchives_where’ );
add_filter( ‘getarchives_join’, ‘customarchives_join’ );

function customarchives_join( $x ) {

    global $wpdb;

    return $x . ” INNER JOIN $wpdb->term_relationships ON ($wpdb->posts.ID = $wpdb->term_relationships.object_id) INNER JOIN $wpdb->term_taxonomy ON ($wpdb->term_relationships.term_taxonomy_id = $wpdb->term_taxonomy.term_taxonomy_id)”;

}

function customarchives_where( $x ) {

    global $wpdb;

    $exclude = ‘5’; // category id to exclude: support. How to exclude additional ones?? By adding category IDs separated by comma, i.e. ‘5,3,18’

    return $x . ” AND $wpdb->term_taxonomy.taxonomy = ‘category’ AND $wpdb->term_taxonomy.term_id NOT IN ($exclude)”;

}

I did not need to modify my template tags for this to work!

Wordpress Fatal Error during Profile Update

When updating a user profile in Wordpress, I received the following error message:

Catchable fatal error: Object of class __PHP_Incomplete_Class could not be converted to string in C:\wamp\www\mysite\wp-includes\functions.php on line 1486

I found the issue… it appears to be a known Wordpress glitch, which happens after deactivating a plugin that wrote data into the user_meta data table. There are currently two solutions:
1) Modify WP core file wp-includes/functions.php, or
2) delete database entries of de-activated plugin in user_meta data table
Solution 2 worked ok for me (whewww!). Detailed solution can be read up here: 

http://webdesign.anmari.com/1895/wordpress-user-editing-problems/

Redirect after login to same page

I keep forgetting how to do this and had to look it up multiple times already: how to redirect a user back to the same page after logging in on a Wordpress site?!

In your template file, for example in single.php, use the following code for the login link:

<a href="<?php echo wp_login_url(get_permalink()); ?>" title="Login">Login</a>

After logging in, this should redirect the user back to the page he visited before logging in.

How I lost my background images with LESS

Shortly after uploading my new website CSS file, I noticed that background images seemed to disappear. On my own computer they usually showed, but most other users as well as online browser test pages would not see any background images. Normal images, integrated through the <img> tag were visible though.

The issue turned out to be a classic case of human biased, wrong direction troubleshooting. Because I had had an issue with a JS snippet together with using Cloudflare (a free CDN), I suspected that the CDN was at fault. However, I was barking at the wrong tree!

I am using Less, a dynamic stylesheet language, to speed up development. It is similar to SASS but easier to install; and it does not automatically convert the Less file into a valid CSS file! That turned out to be the problem. While in the development version of a website it is ok to use the original Less file, which is the converted to CSS through JS, for the production site I wanted pure CSS.

So what happened? I used Firebug on my local server version to retrieve the CSS and created through copy-paste the production CSS file. Afterwards I also minified it, and as it worked fine on localhost, I assumed all is in order.

However - it turned out that the Less JS converted my background links in a way that the path linked to my localhost files. That is why background images were visible from my computer, while not showing up for anyone else.

In conclusion: 1) I am still using LESS (I like it!), and 2) next time something goes wrong, I will go through the source code first, instead of blaming a CDN :)

Images in Responsive Design

What is responsive design?

In short, it is a way to change the view of a web site and adjust it to different type of hardware that is used. For example, a web site viewed on a large screen desktop computer is made look different from the way it looks on an iPhone.

How is it done?

An easy way to do it is the use of media queries, either within the HTML header to load different CSS files, or within a single CSS file itself. Example:

@media only screen and (min-width: 768px) and (max-width: 991px) { your CSS styles for this screen resolution here }

But what about images?

Good question! Standard images, i.e. the ones loaded within the HTML image tag <img> can be scaled with CSS. However, this is not recommended; while looking smaller, it still requires the full size image to be loaded, which is not desirable when accessing the mobile web through a handheld device. So what to do?

Use Background Images when possible

Whenever possible, use background images through CSS instead of <img> images. Because with media queries, different CSS file sections are loaded depending on screen resolution, and background images are defined in CSS, not in HTML, you can load a matching background image for each screen size.

What is are the issues?

Well, background images cannot always be used. For example, when writing a post in a blog and you want to add a picture to the post, this will be uploaded as <img> image. Or if you want to use a javascript enhancement like Fancy Box, this also requires standard images.

Conclusion

Use background images whenever you can, and keep an eye on other options to adjust standard images to your responsive design. Some resources are listed below:

WP Editorial Calendar and Cloudflare conflict resolved

I recently implemented the free CDN Cloudflare on my website and I am very happy that I did so; it really speeds up loading times. However, after installing another Wordpress Plugin, Wordpress Editorial Calendar, it would not work. Instead of showing the calendar, it only showed a blank page.

After switching around my installed plugins, I decided to check with Cloudflare if they heard about similar issues. I sent an e-mail to their support team, and they figured it out within a few hours time (thanks for your great support, Cloudflare team!).

The solution was in the Cloudflare settings that I had applied. When switching off the Beta features Auto Minify and Rocketscript, the calendar plugin would work beautifully.

My new website went online

Finally after a lot of re-design time, my web design business website went online :). Though not finished yet (additional functionality still to come), it is a good start. Wheww!

Next thing to come: responsive design!