How to Create a Custom Post Types Archive Page in WordPress

If you want to show your custom post types on your category archive pages?

Add this to your functions.php file:

add_filter('pre_get_posts', 'query_post_type');
function query_post_type($query) {
  if(is_category() || is_tag()) {
    $post_type = get_query_var('post_type');
	if($post_type)
	    $post_type = $post_type;
	else
	    $post_type = array('post','myCustomPostTymeName'); // replace myCustomPostTymeName to your custom post type
    $query->set('post_type',$post_type);
	return $query;
    }
}

Now change the variable ‘myCustomPostTymeName’ to the registered name of your custom post type, and Enjoy!

Z-index in IE whith drop down menus

One of Internet Explorer’s (IE) most commonly encountered bug is when using z-index. I experienced this recently when using a Slider plugin for WordPress along with a drop down navigation.

Whilst doing some browser testing I noticed that the drop down menu hides behind the Slider. I tried to fix this using z-index. I applied positions and z-index to the offending elements but they still did not behave properly.

After Googling the issue I came across this post which explains the problem perfectly. I needed to apply z-indexes to higher level elements that sit side by side in the DOM. In my example I applied a position:relative; z-index:2 to the #header div and a position:relative; z-index:1 to the #main div. Seems to have done the trick perfectly!

Set Custom Image Size

Function Reference/add image size

Description

Registers a new image size. This means that WordPress will create a copy of the post thumbnail with the specified dimensions when you upload a new thumbnail.

Usage

<?php add_image_size( $name, $width, $height, $crop ); ?>

Parameters

$name
(string) (required) The new image size name.

Default: None
$width
(int) (optional) The post thumbnail width in pixels.

Default: 0
$height
(int) (optional) The post thumbnail height in pixels.

Default: 0
$crop
(boolean) (optional) Crop the image or not. False – Soft proportional crop mode ; True – Hard crop mode.

Default: false

Reserved Image Size Names

thumb, thumbnail, medium, large, post-thumbnail

The names “thumb” & “thumbnail” are just alias, so exactly the same.

However, if needed, you can always set the options yourself:

update_option('thumbnail_size_w', 160);
update_option('thumbnail_size_h', 160);
update_option('thumbnail_crop', 1);

Examples

A theme’s functions.php file.

if ( function_exists( 'add_theme_support' ) ) {
	add_theme_support( 'post-thumbnails' );
        set_post_thumbnail_size( 150, 150 ); // default Post Thumbnail dimensions   
}

if ( function_exists( 'add_image_size' ) ) { 
	add_image_size( 'category-thumb', 300, 9999 ); //300 pixels wide (and unlimited height)
	add_image_size( 'homepage-thumb', 220, 180, true ); //(cropped)
}

Crop Mode

Set the image size by resizing the image proportionally (that is, without distorting it):

add_image_size( 'homepage-thumb', 220, 180 ); // 220 pixels wide by 180 pixels tall, soft proportional crop mode

Set the image size by cropping the image (either from the sides, or from the top and bottom):

add_image_size( 'homepage-thumb', 220, 180, true ); // 220 pixels wide by 180 pixels tall, hard crop mode

Using the New Image Sizes

Within a theme’s template files.

<?php if ( has_post_thumbnail() ) { the_post_thumbnail( 'category-thumb' ); } ?>

WordPress Security

Having your site hacked is bad news. There are many ways in which a site can be hacked, and many outcomes, but be assured that none of them are pleasant.

Luckily there are things that you , as WordPress site owners, can do about it.

User names and passwords

This is my absolute number one tip, use strong username and password combinations.

I recently had my PayPal account hacked because I used the same username and password everywhere. Eventually, I either signed up to a fake site, or a site I registered with was hacked. Either way, once the hackers had my details they could access everything of mine online.

Here are some rules to follow:

  1. Don’t use ‘admin’ as a username.
  2. Use a strong password.
  3. Use a unique password.

If you have a user called ‘admin’ set up a new user with administration privileges and then go and delete the ‘admin’ user. Do it now!

WordPress will tell you if your password is strong or not. If it isn’t, think of another one.

Since my PayPal incident I’ve started to use unique passwords for nearly every site that I use. I know that it sounds daunting, but there are ways to manage passwords (check out 1Password).

WordPress updates

Keeping up to date with the latest version of WordPress and especially the security patches is my next biggest tip.

As of writing WordPress is at version 3.4.1. They are constantly releasing security patches and other major upgrades. Keep ahead of the hackers by having the latest version installed.

Warning: back up your site fully before installing updates, especially point releases, i.e. moving from 3.4.1 to 3.5.

Sometimes upgrades will break your themes or plugins. This is just the way it is. Nobody can predict the future, but the best themes and plugins should be more future proof.

If you run into problems with upgrades, revert to your backed up version and contact your WordPress professional. Ideally, have your pro do the upgrade, testing and bug fixing for you.

Helpful plugins

There are some really helpful security plugins on the market:

Security

Backups

The Tools of the (WordPress Freelance Development) Trade

I’ve been freelancing for a while now. I’ve also been developing WordPress sites for a while. In that time I’ve used many different tools. Some have been great, and some less great. Here I share a list of the tools that I’m currently using:

Accounting

I use the excellent FreeAgent* to keep track of my estimates, invoices, expenses, bills, tax and more. FreeAgent actually makes filing expenses, dare I say, fun!

You can get valuable overviews of your business, so that you can finally feel in control. To check out FreeAgent click here*.

* Those are affiliate links, but guess what, if you follow those links, not only do I save some cash, you do too!

Time tracking

I’ve been using Toggl for years now. It’s a really simple time tracking tool with some clever features. It also integrates with my favourite project management tool…

Project management

The mighty Basecamp has been an industry standard for years now. I haven’t updated to the ‘new Basecamp’ yet, I find that Basecamp ‘classic’ still does everything that I need it to, with all the integrations that I need.

Design

Wireframing

I’ve faffed about for too long trying to keep up with free wireframing tools. So, I’ve just signed up to Mockingbird, which is an online wireframing tool. It’s not free, I pay $9/month for the ‘Personal’ plan. There might be better ones out there, but this does the trick for me.

Graphics

I’ve been using Adobe’s Photoshop for years. It’s probably time that I upgraded though, I’m still on CS3.

Web development

Text editor

Coda, by Panic, has been around for ages. I started using it because Chris Coyier did and I’ve stuck with it. There are some nice features beyond what you would expect (including a WordPress plugin for code completion and syntax highlighting). I hear that there is even more fun to be had with Coda2.

Local development environment

I’m on a Mac, so I started off using MAMP. MAMP makes it pretty easy to set up and run a local Apache, MySQL and PHP stack. This allows you to install websites on your machine, making development much quicker and safer. If you aren’t doing this already, do it now!

I’ve since upgraded to MAMP Pro, which allows me to easily create local domain names. So, instead of using localhost/mysite.com, I can use kdev.mysite.com (or anything else for that matter!). MAMP Pro also allows you to access your local server remotely, although I haven’t tried that yet.

FTP client

FileZilla is my FTP client of choice. I can’t compare it to others, but it’s always done the job for me. It’s free.

Browser

If you’re not using Google Chrome, chances are you should be. I’ve found it to be quicker than Firefox, and I prefer the developer tools to Firebug.

 

I hope that helps. If you have any thoughts or suggestions, I’d love to hear them in the comments.