How to Set Up WordPress (No, Really!)

WordPress is famous for its “5-minute installation.” Some even argue that this ease of installation is what made it so popular. Though its numbers are still in the dark, some claim it as the most widely-used CMS, and some say it powers 18% of all websites. But despite its overwhelming simplicity and popularity, many users don’t know how to squeeze some of the most important things out of their WordPress sites. What do I mean by that?

  • Setting up Custom Post Types: make more than just blog posts and pages.
  • Cleaning up headers: taking the junk out of the WP header (can you believe some sites accidentally load jQuery TWO or THREE TIMES?)
  • Setting up Custom Fields: need more than just one content box to edit? Why not Advanced Custom Fields?
  • Moving the WordPress Installation into a sub-folder: Because maybe you don’t want bots brute-forcing your /wp-login.php script
  • Other Improvements: optimize your SEO with Google Sitemaps XML and WordPress SEO plugins.

Blank Theme

If you need a blank theme that takes care of cleaned headers and has some starter custom post type code, download my blank theme for WordPress. Super minimal, and geared toward people who get annoyed at every one else’s CSS but their own (did I mention how minimal it is?).

Setting Up Custom Post Types

Custom Post Types are great. Let’s say you have a photography blog. Sure, you figured out how to set up the blog posts and the about pages, but what if you want a photo gallery? You just want something simple, and you want to upload new photos that all go to one place.

In the past, you would have to code your own WordPress theme and fiddle with post categories to make your gallery. You’d have to wriggle together some PHP wizardry to style the “gallery” category into something entirely different, or just deal with the fact that it won’t turn out how you want it. But this is perfect for custom post types.

Not only can you add a “gallery” custom post type, you can also use WordPress’ theme hierarchy to make your own gallery template pages, and keep them completely separate from the blog section. Let’s say you add a section called portfolio. This is how you’d go about adding it:

Step 1: Add to functions.php

function custom_post_types() {
		register_post_type('portfolio', array(
			'labels' => array(
				'name' => _x('Portfolio', 'post type general name'),
				'singular_name' => _x('Portfolio', 'post type singular name'),
				'add_new' => _x('Add New', 'portfolio'),
				'add_new_item' => __('Add New Portfolio Piece'),
				'edit_item' => __('Edit Portfolio Piece'),
				'new_item' => __('New Portfolio Piece'),
				'all_items' => __('All Portfolio Pieces'),
				'view_item' => __('View Portfolio Piece'),
				'search_items' => __('Search Portfolio'),
				'not_found' =>  __('No pieces found'),
				'not_found_in_trash' => __('No pieces found in Trash')
			),
			'public' => true,
			'publicly_queryable' => true,
			'show_ui' => true,
			'show_in_menu' => true,
			'query_var' => true,
			'rewrite' => true,
			'capability_type' => 'post',
			'has_archive' => true,
			'hierarchical' => false,
			'menu_position' => 5,
			'supports' => array('title', 'editor', 'thumbnail')
		));
	}
	add_action( 'init', 'custom_post_types' );

Step 2: Create template files

Create the following files in your theme:

  1. archive-portfolio.php — the collection of gallery images
  2. portfolio-single.php — the template for a single gallery image

to add a page with all your gallery images on them, and for the single gallery template. Note that the word portfolio is the same as the first paramater for the register_post_type function. If you changed this, then you would also change the file names of these 2 template files.

And that’s it! Play around with Custom Post Types and you’ll see in no time where they become handy. You can also read the documentation here for what all the custom post type settings are.

Cleaning Up the Header

WordPress has a lot of clutter in its header by default — including broadcasting to the world that you’re using WordPress. Insert the following code anywhere into functions.php to clean up some of the WordPress headers, without taking away anything you need:

remove_action('wp_head', 'feed_links_extra', 3);
	remove_action('wp_head', 'feed_links', 2);
	remove_action('wp_head', 'rsd_link' );
	remove_action('wp_head', 'wlwmanifest_link');
	remove_action('wp_head', 'parent_post_rel_link', 10, 0);
	remove_action('wp_head', 'start_post_rel_link', 10, 0);
	remove_action('wp_head', 'adjacent_posts_rel_link', 10, 0);
	remove_action('wp_head', 'wp_shortlink_wp_head', 10, 0);
	remove_action('wp_head', 'wp_generator' );

jQuery

As an additional step, you can also register jQuery to load automatically with WordPress, without colliding with another plugin’s jQuery. Insert the following anywhere into functions.php:

function script_check() {
		wp_dequeue_script('jquery');
		wp_deregister_script('jquery');
		wp_register_script('jquery', '//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js', false, null);
		wp_enqueue_script('jquery');
	}

	add_action('wp_enqueue_scripts', 'script_check');

Aw, forget that. I like to just hand-code a good ol’-fashioned jQuery <script> tag into my <head> section; none of that WordPress mumbo-jumbo.

That will technically work, but if you know anything about WordPress plugin authors (ie, the entire world—educated and un-), you’d know that, without fail, not letting WordPress know you’re using jQuery will probably mean it will try to add it again for you. This will result in users having to download scripts at least twice when they don’t need to, not to mention the additional nightmares of having version conflicts.

This script will not only resolve most conflicts (other than a plugin hard-writing its own jQuery <script> into the HTML—in which case you should probably not use anything that terrible), but it has the added benefit of using the Google CDN: mo caching, less problems.

Setting Up Custom Fields

So you’ve got that nice, neat content box for every post, page, and CPT (custom post type), but what if, say, I don’t know, it’s not enough? What if you want to give users the option to swap out a photo? Or edit a really-complicated table?

To solve this problem, you’ve probably tinkered with WordPress’ Post Meta as a way to add additional fields to the post. The problem with this is that it’s terrible. It’s just terrible. I won’t go into it. You know it’s terrible, and if you’ve ever let a client use this, then shame on you.

Along comes Advanced Custom Fields to add image boxes, true/false checkboxes, additional content / text boxes, and even editable arrays.

This man is a genius, I tell you. To be frank, this is such a well-designed, completely stable plugin it baffles me that this isn’t a standard part of WordPress.

I won’t go into a full-fledged tutorial of how to use this here when such a great guide already exists, but the takeaway from this is that you need to install this. Now.

Moving the WordPress Installation into a sub-folder

Why? The main advantage of this is to not let a bot ping your /wp-login.php script without breaking a sweat. By taking this into a sub-folder, no, it doesn’t make your site invincible to bot attacks. But it does make bots work harder to find it, along with a few other hot targets (at least, for now).

Moving WordPress into a sub-folder requires 4 steps:

Step 1: Move everything EXCEPT /index.php.

Make a new folder inside your root directory and name it whatever. This is your choice, and should be unique for each site. Don’t cop out and name it “WordPress” or “wp” or something lame like that. Name it brunhilda or tardis or omg-dont-look-in-here. Your choice. Anyway, move everything except /index.php.

Step 2: Edit /index.php

Inside index.php you should see the following code:

/** Loads the WordPress Environment and Template */
	require('./wp-blog-header.php');

Change it to:

require('YOURFOLDERNAME/wp-blog-header.php');

Step 3: Make a blank index.php file inside your new folder
Open up a text editor, and save a blank file as index.php inside the folder you just made that has everything in it. This will prevent someone seeing a directory listing of this folder if they typed in the URL from a browser (assuming you didn’t mess with your APACHE config to disable directory listing).

Step 4: Edit the WP database
In case you made this switch to an existing WP installation, you may find that by moving the WordPress installation, you can no longer log in. Or, at least, when you log in, it spits you back out to a 404 page. If you can still log in perfectly after all this: skip this step. If not, no worries! Read on.

If you’re still getting the 404 error when you log in, have a look at your WordPress database (look at wp-config.php for your DB login info; if this is on your computer, you can access your database with Sequel Pro or Heidi SQL; if this is on a host, try logging into your dashboard and looking for “phpMyAdmin,” or some other database access tool).

Look at the wp_options table (or whatever your WP prefix is). The first entry should have the option_name siteurl. For the option_value, you’ll see your WordPress home URL. You need to change this to the URL of your WordPress install: http://yourblogsite.com/yourwordpressfolder. Try logging in again.

Other Improvements

Sitemaps

Having sitemaps is a vital part of maintaining a website—it notifies Google of every page on your website, even pages it missed during its automatic crawl. While these are clunky to maintain for hand-coded sites, WordPress sites are built to easily take care of generating this themselves. The Google XML Sitemaps plugin does that wonderfully, and even automatically notifies Google of your sitemap when you generate it. Be sure to add your custom post types to the sitemap, as they aren’t added by default.

SEO

The last piece of the puzzle is SEO. Often times, clients want the ability to edit their titles and meta tags, which WordPress doesn’t easily offer for some reason. WordPress SEO by Yoast offers clients full control over titles and meta descriptions, as well as canonical URLs.

Quick Links

Drew Powers is a frontend developer at Envy.