Archive for the ‘Wordpress’ Category

Renaming Your WordPress Theme

When setting up a self-hosted WordPress site, you’ll be using a theme. I always start building my site with a pre-made basic theme such as the default WordPress theme. But then I make adjustments to that theme to fit my exact website, and I typically do so not as a child theme as described in this article, but actually by editing the theme itself. The biggest issue that arises with this methodology is when the base theme you used gets updated, it will overwrite all of the wonderful changes you’d already made to your site. Luckily, there is an easy way around this! Here are the four easy steps to renaming an existing theme to prevent it from updating:

1. Make an exact copy of the theme you plan on changing. The easiest and best way of doing this is using an FTP program like Filezilla. After you’ve already setup WordPress on your site, and installed the theme you are interested in, then go find that folder in your server files. The themes are located wp-content -> themes. Download the theme folder to your desktop rename the folder to your desired theme name.

2. Change a few lines of code in the style.css file. Now that you’ve got a “new theme”, you’ve actually got to change a few files so that WordPress recognizes it as a new theme. The only meaningful file change is the style.css file (which must keep the name of style.css), which references the theme name that WordPress uses. Here is an example of the commented code that needs to exist at the top of your style.css file. If you want, you can keep everything the exact same, just change the theme name to your new theme name.

/*
Theme Name: YOUR_NEW_THEME_NAME_HERE
Theme URI: YOUR_WEBSITE_URL
Description: DESCRIPTION_OF_YOUR_THEME
Version: 1.0
Author: YOUR_NAME
Author URI: YOUR_WEBSITE_URL
Tags: FOR_WP_THEME_SEARCH_IF_PUBLISHED
*/

3. Change a few lines of code in all the remaining files. In almost all of the remaining files, you’ll see something similar to the code below. This is an optional step, but you might as well be thorough and just update all the files to have your new theme name.

<?php
/**
 * @package WordPress
 * @subpackage YOUR_NEW_THEME_NAME_HERE
 */
?>

4. Create a screenshot for the WordPress theme selection page. You might notice inside the folder you downloaded, there is a screenshot.png file. This is the image that shows up in the theme selection interface in your website’s WordPress administration. Make a new screenshot of what your theme actually will look like. The image should be 300 pixels wide by 225 pixels tall. If you are curious, this is the screenshot I did for my own adjusted theme (yes, I used the process described above myself).

5. Upload and install your new theme. Once you are done with steps one through four, you can upload your new theme into the same themes folder you downloaded it out of originally. Once that is done, if you go to the WordPress administration interface for selecting the active theme, you should see your new theme as an option, in addition to the currently selected original theme you had been using. Pick your new theme for the site, and you are all set to go. You’ve got a fully functional theme that won’t get overwritten, no matter how many changes you make!

Making A Website From Start To Finish – Part 2

In Part 2, I’ll go over the initial setup of the development of the website. In particular, because I’m a big supporter of using WordPress for most websites, I’ll go over how to install and setup WordPress on your self-hosted (not hosted by WordPress) website. I’ll also talk about the other preparation needed for your early development stage. Here’s the list of what we’ll talk about:

  • Determining CMS Needs
  • Installing and Setting Up WordPress
  • Building Out Site Content
  • Search Engine Optimization
  • Link Building and Marketing

As in Part 1 of this tutorial, I’ll use our example restaurant website as an example for each item in the list.

1. Determining Your CMS Needs: The first thing you need to do before beginning your development is determine if you are going to use an out-of-the-box content management system for your website. This will be determined a lot by whether you, as an experienced web developer, will be maintaining the site, or if a client with no web experience will be managing it. If the site will include a blog, or regularly changing pages, a strong CMS would be an intelligent move. If the website will be relatively static, not change regularly, and when it does, will be updated by someone with web developing experience, then a CMS might be overkill. Setting up a CMS can also take more time than just building a site from scratch, so don’t just opt for a CMS by default.

For our restaurant website, let’s pretend they update their menu seasonally and they want to post specials online weekly. I think that’s reason enough to set up a CMS so that they don’t need to regularly ask you to update it.

2. Installing and Setting Up WordPress: If you ever work on a website that needs a CMS, I hands down, every single time, will recommend WordPress. It has so much flexibility, but at the same time, has a very usable interface for anyone who tries to use it. So I’ll walk through the steps of installing and setting up WordPress for a self-hosted (non-Wordpress.com) site.

Step 1. Install WordPress! Luckily, WordPress has a great installation walkthrough to help you through this process. It is definitely more complicated than if you use WordPress.com and don’t host your site, but it isn’t that bad at all.

Step 2. Download and install the theme and plugins you want. If you are planning on building a more complex site, start with a basic theme that meets as many needs as you can. You’ll adjust it later. Find the plugins that you’ll want. For a basic WordPress install, I recommend the following plugins: Askimet, All In One SEO Pack, Google XML Sitemaps, Jetpack, and Sociable. Askimet is the best for blocking spam comments, Jetpack is created by the WordPress team and comes with a lot of other built in plugins like stats for your site. The SEO pack, Sitemaps, and Sociable are all great plugins to help with SEO and increasing website traffic. All of these plugins (except for Jetpack) make more sense only if you are including a blog in your website.

Step 3. You’ll also want to delete the original page, post, and comment that by default come with the basic install. I never understood why the install came with this content, but it is best to start with a clean slate.

Step 4. Create a new blog homepage separate site homepage. By default, WordPress sets the blog post listing as the homepage of your site. If you want the blog to be in a subdirectory and you want a different homepage, then you’ll have to create these two pages BEFORE you complete step 5.

Step 5. Setup your site preferences under settings. There are a lot of default settings that you might want to change, so be patient, and go through each settings page in WordPress. Most importantly, if you want a separate homepage and blog homepage, then pay attention to the Reading Settings. Set your front page display to a static page, with the homepage as your newly created homepage, and the posts page as your newly created blog homepage.

Step 6. Adjust your theme as needed. This step really ties in with your real development, so I’ll talk about this more in Part 3 of this tutorial.

For our restaurant website, I would definitely use WordPress. I’d try to find a theme that was intended for restaurants in the first place, but I’d make sure it wasn’t overly complex first. I’d definitely set up a static homepage, and I would leave the blog out of the setup for the site. Just because WordPress is by default a blogging software does not mean you have to use it that way.

3. Building Out Site Content: You can’t have a website without content. I usually leave this item to my clients, but they frequently struggle with this task. It is hard for someone who doesn’t build websites, and doesn’t create marketing materials regularly to build out content for a site they haven’t seen yet. It is often a catch 22 situation for me because my clients struggle to build out the content before they see the fully designed site, and I need the full content before I can finish designing certain pages. For example, I can’t design icons, pick stock photos, or handle content layout very easily without the content itself. This is something you always have to go back and forth on, and the content usually ends up being the last thing changed on the site.

For our example site, I’d make sure that the owners provided their menus ahead of time, along with descriptions of the restaurant, contact information, hours, and any other marketing materials they may have already prepared previously. I’d try to build my designs around this content, but I’d definitely try to build the content into the site as I begin the development process.

4. Search Engine Optimization: SEO is an ongoing process. But you should start thinking about it early. To begin with, I’d register the site on DMOZ, an online website directory. There are other directories, but some of them charge to be listed, while DMOZ is always free. Next, you want to consider some of the plugins I mentioned earlier in this post, but you should also consider SEO for your HTML page structure. The faster the page loads, the better the META information you have in the head of your pages, and the better tagging you use with keywords (good header tags and quality content), the better off your site will be. You can also look into using schema.org which helps search engines display information more appropriately in results. This can help you a lot when users are determining whether they want to visit your site or not.

I’d definitely do all of these things for our restaurant website. I’d register on DMOZ, setup good meta descriptions, keywords, and a quality title for each page, keep the page HTML small, use quality keywords in the content, and place them strategically in header tags, and I’d definitely use the schema.org restaurant schema to help with search engine result displays.

5. Link Building and Marketing: The last thing you should consider before you start your full development process is marketing. You want to get a head start on this process before the website is complete. Getting links to your website out there is vital to showing up in search results. The more sites that link to yours, the better off you’ll be. Now is the time to develop any marketing ideas around your new website that you might want to use for advertisement. Pairing marketing and link building with the launch of your website is a smart idea.

For the restaurant website, I’d definitely consider some sort of website special or coupon to reward customers that came to the restaurant via the website. It will encourage them to revisit the site and the restaurant, which is ultimately what we want. I’d also look for local listings to make sure that the website is included in those listings. If you are worried about the website not being done before those listings are public, you can put up a temporary splash page indicating the website is coming soon. That is a common practice for companies that are getting going, want to build an online presence and market, but don’t have their full product ready yet.

Now that all of the pre-development issues are taken care of, it is time to start your real code development which I’ll go over in the final part of this tutorial series, Part 3. I’ll also touch on site optimization and analytics to track the success of your newly created website.

WordPress: The Best Blogging Software

WordPress is hands down, the best blogging software out there. After using it for my own personal website, as well as several freelance clients, I’m completely convinced there is nothing better out there. Now, it is important to note that there are two different WordPress versions that you can use; the .com and the .org versions. The .com version is not customizable anymore than your average blog software like Blogger. The .org version is the one I’m about to rave about, and is the much more involved and capable option. So, there are a few particular reasons that I believe it to be so wonderful which are outlined below:

It’s Open Source
So in case you don’t know, the phrase "open source" means that the code that runs certain software is made publicly available. With publicly available code, it makes it possible for individual developers to write additional code that can get tacked on to the initial software release in the form of apps, plugins, et cetera. Without open source software, the world would be limited to only what companies manage to come up with and release. But because of the wisdom of the WordPress team, they’ve released their potentially proprietary code to the masses to promote the growth of the software via public participation, and documented all the details in the WordPress codex.

It’s User Friendly
With my background in user research, I like to think that I have a good grasp on user friendly interfaces. I have to say outside of a handful of small issues that I’ve encountered with WordPress, it is really amazingly intuitive. They’ve managed to create an interface that promotes easy usage by developers, designers, and content publishers. Normally this is a very difficult task given that all three of those groups work on such different levels and on different content. From my experience of working on back-end code for WordPress, front-end code for my design theme, and content as a blog author, it is just so easy to use.

It’s Constantly Improving
The team at WordPress manage to release updates on a very regular basis. In addition to that, because of its open source nature, there are new plugins and themes being released for WordPress at an incredibly fast pace. The best part is, if some new technology comes out, you can bet your bottom dollar that within a few weeks at the most there will be a WordPress plugin that incorporates it into the blogging software for public usage!

It’s Incredibly Functional
Going off of my last point, the plugins available for WordPress make it incredibly functional. You can obviously use the software for simple blogging. However, you can also adapt it to maintain your entire website complete with a static homepage that isn’t your blog homepage. Once that’s complete, you can introduce youtube videos, flickr photos, facebook and twitter feeds, contact forms, and pretty much anything else your heart desires. With all of this functionality, there is hardly a reason to ever go build a smaller sized website (<100 pages) without WordPress!

WordPress: A Content Management System

There are a whole slew of reasons why WordPress has got to be the best blogging software out there. If you ask me however, WordPress’ ability to serve as a very functional, simply implemented, and relatively robust CMS (Content Management System) takes the cake. I was introduced to this concept by a pretty good blog article which got me started in my first full site installation. This article will walk you through the basic steps you’ll need to use WordPress as a content management system for your tech savvy self or for your non-techie clients.

The first step is to understand what WordPress can do. WordPress, which started out as just a blogging software, has expanded to include both posts (on a blog) and pages (like an about us page, or contact us page). In addition to that, WordPress is open source (which means that the code that creates it is public) allowing for people to create additions to it called plugins. These plugins do pretty much everything you can imagine like create a contact form, display google calendar events, create flickr photo arrays, or show youtube videos. With this software, you can make incredibly complex sites, with lots of ease, and simple site management capabilities.

So here are the steps to setting up WordPress as a CMS for a website. First you’ve got to install wordpress in the root directory of your site. If you were using wordpress just for blogging, you might install it inside of a folder called “blog”, but you’ll be using it for everything, including your homepage, so root it is. Second, after your installation is complete including database setup and the like, visit http://yoursite.com/wp-admin/, login using the admin information you setup during installation, and visit the “pages” section on the left navigation. You’ll want to add TWO pages. Call one of them “Home” with a permalink of just your root address, and the other whatever you want (if you are including a blog on this site, then perhaps create that page, if not, just do an about us page or something). Third visit “Settings > Reading” on the left navigation. With two pages already created, you’ll be able to set the front page as “Home”, and if you are including a blog, that page as your posts page.

That was the initial and easy walkthrough. With those three steps, you’ve already successfully setup your site to have pages, with a homepage, and a blog as a subsection of your site. Outside of obviously editing your theme to work with your design, you may also want to install some plugins to make managing the site more convenient for non-tech people. There are prebuilt plugins for youtube, flickr, google maps, google calendar, facebook, twitter, and most other platforms that you or your client may already be using.

If you have any questions, don’t hesitate to ask. The link in the beginning of this article discusses a lot of good plugins that you might find helpful, though the article is a little outdated and may be lacking on newer plugins. For example sites that use wordpress as a CMS and blog, check out this site or one of my clients. Good luck!