Changing the URL of your WordPress site

A question often asked is how to change the URL of their WordPress site.

Here’s a common scenario:  you install WordPress into a sub-directory on your web server so you can create a theme, upload content, and test it without interrupting your current site.  There’s nothing wrong with doing it this way.  In fact, this is how a lot of people develop and test websites before launching, myself included.  One problem many people run into after switching their homepage to point to the sub-directory you installed WordPress is that many of the URLs still use the sub-directory instead of the root.

Let’s look at an example.

• Current site URL: http://mywebsite.com
• WordPress Development URL: http://mywebsite.com/wordpress

At some point development stops and you are ready to switch your homepage so that it’s using the /wordpress/ directory.  However, you notice that something isn’t quite right.  Perhaps the links to your posts are going to the old development URL?  Perhaps your theme was dependent on the old URL and the header image is broken?

This is fixable in two easy steps.

Update URL in WordPress admin panel

The first step is to login to the admin and go to Settings -> General.  Update the WordPress address (URL) and Site Address (URL) options from http://mywebsite.com/wordpress to http://mywebsite.com.

Run MySQL query to update content

The next step is to run a MySQL query.  If you aren’t familiar with SQL, contact your host or IT support to see if they can run it for you.

UPDATE wp_posts SET guid = REPLACE (guid,'http://mywebsite.com/wordpress','http://mywebsite.com');
UPDATE wp_posts SET post_content = REPLACE (post_content,'http://mywebsite.com/wordpress','http://mywebsite.com');

Once you have completed these steps, all URLs should be updated.

If you are performing more complex moves such as moving the database to a different server or moving the WordPress files around, check out these articles on the WordPress Codex: Moving WordPress and Changing The Site URL.

Teaching Good Web Design: Part 2

In part one the underpinnings of a good design were laid out. This helped to arrange the content and establish a hierarchy of information in your design. However, there is more to creating a successful piece than just spectacular organization. For a more complete picture we turn to the artsy part of design- the things that are easily visible to your viewers and will make people want to look at the content. The simplest of ticks with these elements can create a sleek modern look, a page full of rustic charm, or an exotic beauty. It all depends on how you use them.

Adding the attention getters- The Elements of Design

 

Line – Line is the most important element in web design as we use it to define breaks in sections and separations between navigation. Thinner lines (1px) will give a sleek minimalistic look while heavier lines (5px) can create nice borders around elements. Giving a line varying thickness can also create a unique feel, such as the stroke of a calligraphy brush or the hand crafted lines of art.

Shape- As we work on the web world, the square and rectangle are the first shapes that pop into our minds when it comes to design. After all, they are easily stack-able, arrange-able, readable, and the way our mind orders things. However, when it comes to things that aren’t content, other shapes used in a design can make your site stand out from the crowd.

Direction- Most layouts are horizontal, and with wide-screen monitors becoming more and more the norm, websites are becoming more focused on wide open layouts. This is not to say that vertical isn’t important, because if you work your design right, people will want to scroll down!

Size – Consider your positive space and your negative space when dealing with size. Most screens can now handle over 900px wide layouts, so you’ve got a good area to work with. Use size to single out important or eye-catching elements.

Texture – Yes, you can have texture in a site. Subtle textures, such as those found in photos, can be overlaid on a color to help add character and that little extra personalization to a site .

Color and Value – I’m placing these two together since they’re the major players in design. (Value is the lightness or darkness of a color, so we’ll just incorporate that into talking about color.) A Design relies upon colors. Be it black, white, red, or blue, all designs have color. What you need to keep in mind is that the best layouts have either 1 or 2 main colors and then the rest are accent colors. Having more than 2 main colors tends to overwhelm the eye, so keep your 3rd color as an accent by using it sparingly and in smaller doses around your page. Moving on, color combinations are tricky- lots of things like culture and personal preference tend to hold sway over things like this, but I can say don’t have every color the same value. Vary the lightness and darkness in your chosen colors to get a better result when you combine them. A bunch of different colors all at the same value can lead to a confusing page if not handled correctly.

Color Theory

Since color is such a big part of design, here are a few helpful insights into color theory.

First off are your primary colors which consist of blue, yellow, and red. It is these colors mixed that create all other colors. You cannot create these 3 colors out of any other color. Your secondary colors are when equal parts of two primary colors are mixed which gives us green, violet, and orange. Add more of one primary color than the other to a secondary color and you’ll get the tertiary colors of yellow-green, blue-green, blue-violet, red-violet, red-orange, and yellow-orange.

 

The above color wheel, starting from top and going clockwise: yellow, yellow-orange, orange, red-orange, red, red-violet, violet, blue-violet, blue, blue-green, green, yellow-green

Complementary colors are a pair of colors that are opposite in hue. What this means is that the primary color and secondary color do not share a primary color. For example the complementary color for blue is orange, a combination of red and yellow. Complementary colors put together at the same value tend to enhance both colors in a way that makes them stand out more or become stronger.

Complementary pairings are: red and green, blue and orange, yellow and violet

To show how complementary colors affect each other, a green square has been placed in a red one and a red square has been placed in a green one. (Both colors remain the same color and value in each square.)

Analogous colors are colors next to the selected primary color on the color wheel, like blue and green or blue and violet. They tend to ease the eye into each color and don’t stand out as much creating a less jarring contrast. More often then not, you’ll be using analogous colors as your main colors and a complementary as your accent.

To show how analogous colors work together, a violet square has been placed in a blue one and a blue square has been placed in a violet one. (Both colors remain the same color and value in each square.)

A good place to further study color theory would be at Tiger Color’s Color Harmonies. It shows the grouping of colors in complementary, analogous, triad, split-complementary, tetradic, and square ways.

In closing…

You can use these basics of art in design and create wonderful websites. Just remember that the above are merely helpers and good advice for you to think about when designing. For more information on design, I would recommend hanging around the fine art section of your local library or bookstore and perusing the books. You’ll find a lot of inspiration and great design.

 

Teaching Good Web Design: Part 1

How do you teach design?

When I first tackled this project that’s immediately what popped into my head. After that came the crushing knowledge that design is such a massive collection of culture and history that I could not possibly teach all of that in one year much less one lesson. Pushing all thoughts of “It’s impossible!” out of my mind, I decided to focus on a different question. Forget about the art, the color theory, the stylistic implementation of items, and answer one thing- What makes a design good? Once I put all of that away, good design became a lot easier to teach.

So some of you may be thinking, if you take out the art, what’s left of design? The framework. Your layout is a very important feature in design. Positioning elements, arranging their size and working with their shape, helps to provide a flow to your design which in turn guides the viewer’s eye along the page. A bad design takes no notice of the notion that things have a certain hierarchy within a page. A good design starts with a great base and so to further that, I’m going to tell you about the principles of art.

There are eight principles of art, each one helping your design achieve greatness. Carefully consider these within your layout frame.

‘Principles of Art’ used in a framework design

Emphasis – Use emphasis by placing your most important items in larger areas higher up on your page. Consider how we read (left to right) and place an important object on the left so that the eye spots it first.

Balance – Use different areas with the same visual weight in area to create a sense of balance to your layout.

Harmony – When a certain amount of space is reserved for a certain thing, make sure that every time that thing is brought up on the page is has that amount of space. This will allow the viewer to associate better between the two instances as belonging to the same subject matter and therefore creates harmony.

Variety – In some areas, place things a bit differently to create a bit of uniqueness. Take a big space and split it into two smaller shapes. This allows for variety, yet still retains balance.

Movement – Remember how a person’s eye moves through your design. You can make their eye start from anywhere- but a good design will keep the eye moving in a fluid motion over your design. A bad design is too confusing and doesn’t have any sense of flow.

Rhythm – This deals with consistency. Remember that you want the eye to move and rest on certain elements. Blank space and area sizing can help you accomplish this- just make sure the page carries the rhythm throughout the design.

Proportion or Scale – This is used mainly for importance. Consider which objects deserve the most attention in your layout. They should be in a bigger space/area when you’re planning your design.

Unity – Once your layout is complete it should look like everything belongs together. The overall structure should not look awkward or stranded at any point.

In part 2, you’ll learn more about the looks of a site and the Elements of Design. This will help you to add a presentable face to your framework.

How to make custom page templates in WordPress

In this article, we’re looking at how to set up custom page templates in WordPress. The benefit of using custom page templates is that they allow you to basically build standard web pages that pull their content from the WordPress database. That means the content can be updated by non-technical users through a web form on the WordPress Admin Panel.

When you publish a page in WordPress, the page.php template is used by default. Certainly you can modify page.php as much as you like, but sometimes you want to design something different from this default template. Custom page templates enable you to design dynamic pages that differ from the standard page.php template. You can build and deploy as many of these as you like, so once you understand them, it really opens up a lot of options to customize your WordPress site to meet the needs of your organization.

There’s no point re-inventing the wheel, and lots of good information about this is available in the WordPress Codex. The best place to start for this topic is on the Pages entry. I would recommend reading that entire page and probably checking out some of the other pages linked from there, but here is one important excerpt to get us going:

WordPress can be configured to use different Page Templates for different Pages. Toward the bottom of the Write > Page administration panel (or on the sidebar, depending on which version of WordPress you are using) is a drop-down labeled Page Template. From there you can select which Template will be used when displaying this particular Page.

So, how do you create one of these page templates? Remember that all page template files in WordPress are PHP files, so if you wanted to create a custom page template for a page called Contact, you would start by setting up a file called contact.php. Technically, the only PHP that you must include in this page goes right at the top, where you identify contact.php as the page template with the name of Contact. The code looks like this:

<?php
/*
Template Name: Contact
*/
?>

Once you’ve put that at the top of the contact.php file and uploaded the file, the Contact template (contact.php) will be available for you as a template whenever you create a page in the WordPress Admin Panel. All the page templates that are available will be shown in a dropdown menu to the right of the post box on the Add Page screen in a box labeled Attributes under Templates.

I’ve included a screenshot here of what that dropdown menu looks like. In this example, there are several custom templates to choose from.

We mentioned earlier that the only PHP you technically must have in a custom page template is the snippet above with the Template Name: Contact line in it. The reason that is true is because with that PHP included, the rest of any custom template could be static HTML if you wanted it to be. In practice, you’ll probably often want to be able to add and update content dynamically through the WordPress Admin Panel so there will be additional PHP, but that is not a requirement for a custom page template.

If you do want users to be able to add content for each page in the WP Admin Panel, how do you tell your template where and how to display that content within your custom page template? You do that by including The Loop in your custom page template. There are lots of ways you can style the content from the loop, but here is a very basic version of it:

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

	<?php the_title(); ?>

	<?php the_content(); ?>

<?php endwhile; endif; ?>

The above version of the loop doesn’t include any extra CSS hooks and only displays the title and the content for the given page. There are lots of other things you could include such as the_excerpt and the_permalink.

One thing that might be confusing about the loop in the context of pages is the use of the term post in The Loop. You might be thinking that pages are different from posts in WordPress so why are we looking for posts in the PHP here?

Pages are indeed different from posts in WordPress, but as far as how they are treated in the WordPress database structure and the way they are called in The Loop, pages are, in that context, a type of post.

Now that we’re using The Loop to display the content for the given page into our custom page template, we can put whatever we want to put around this content. That means our page can have a standard heading or banner at the top and a footer at the bottom, or basically anything else that you can code up. You can also use more WordPress template tags such as get_header and get_footer to make including that kind of thing more modular.

Once you get used to building and using custom page templates, it becomes relatively straightforward to use WordPress to manage content on almost any type of page you can design.

UA WordPress Theme: Update Notifications

One problem with using a custom WordPress theme that doesn’t reside in the WordPress.org Themes Directory is that you don’t have many options for notifying users there is an update available.  If you installed a theme from the directory, WordPress uses a built-in function to inform you that updates are available (see Dashboard Updates SubPanel on the Codex).

So, how does an external theme or plug-in notify a user?  Perhaps you maintain a blog and post your updates there.  Or, you could hope that your blog RSS feed is enough.  You could also have people subscribe to an email list and let them know that way.   All of these are fine methods and some we even use here.  But, the fundamental problem is that it assumes a user of your theme actively follows or is subscribed, in some way, to your blog.  Ideally, the best way to inform a user is through the WordPress Dashboard.

Since we presently cannot hook into the core WordPress function for theme/plug-in updates, the only way is to code your own method.  Luckily, this isn’t as hard as it might seem.

The add_dashboard_page function allows you to easily add a sub-level page under the top-level Dashboard menu item.  From this page, you can read in data from a file on your server (this file can be RSS, XML, TXT, or whatever) and perform a check against the installed theme.  If you are running an out-of-date theme, an update notification will appear in the sidebar and the page offers a download button to grab the latest version.

Here’s what that looks like:

Hopefully, WordPress will open up their API for theme/plug-in updates to externally hosted files in the future.  Until that time, though, this will have to do.

Using WordPress as a non-blog CMS: Understanding the difference between posts and pages

WordPress used to be thought of more as blogging software than a Content Management System. Fortunately, more and more people are beginning to appreciate the flexibility of WordPress to manage more traditional website content. However, if you are new to WordPress, it may not be completely obvious to you how to handle the non-blog content within the context of WordPress.

I think the key to understanding how to use WordPress as a CMS for a traditional website is to understand the 2 main types of content that can be written in WordPress: posts and pages.

The basic difference is that posts are used for blog entries or articles while pages are used for what we might think of as more permanent (though not necessarily static) content in a traditional website.

Here is how the difference between posts and pages is described on the WordPress Codex entry for Pages:

In WordPress, you can write either posts or pages. When you’re writing a regular blog entry, you write a post. Posts automatically appear in reverse chronological order on your blog’s home page. Pages, on the other hand, are for content such as “About Me,” “Contact Me,” etc. Pages live outside of the normal blog chronology, and are often used to present information about yourself or your site that is somehow timeless – information that is always applicable. You can use Pages to organize and manage any amount of content.

So, if you think about a typical blog, the main index will usually show the first couple of paragraphs of 5 or 6 recent posts, and then you can click a Read More link to view the full blog post. In WordPress, whenever you are looking at a single, full blog post by itself, the template that WordPress uses is a file called single.php. On the other hand, the template that controls the traditional pages we’ve been talking about is called page.php.

It’s important to understand a little bit about WordPress template files at this point. A WordPress theme is a collection of files that allows you to customize the look (and to some extent structure and behavior) or your WordPress site. The theme is made up of PHP files called templates, which define how various content types are displayed on that particular WordPress theme.

The number of templates you include in your theme (or that will be included in themes you download/purchase) can vary, but most any theme will have a page.php template for pages and a single.php template for posts.

WordPress templates are similar to most other types of templates that you might be familiar with. The template defines what certain parts of a document will look like, and leaves at least one area open for editable content, which is added via the WordPress admin panel.

If you want a 7-page traditional website where 5 of the pages are the same but 2 are different, WordPress allows you to build custom templates such that different pages use different templates. In other words, all of your pages do not have to use page.php. For example, you could have 5 pages that use page.php and then set up additional custom templates for pages that require different layouts, functionality, etc.

With this setup, you can easily build a non-blog centered website with content managed through WordPress. It’s just a matter of defining any page templates you need and then entering content through the Pages module in the WordPress admin panel.

Defining and designing the templates is not much different from how you would design and build a static website. You can (and probably will) use PHP and or other dynamic components such as WordPress template tags, but there’s also nothing stopping you from building the templates as essentially just standard HTML with a main menu and any other elements you want to include across your pages.

Note: The templates will always have to be .php files in the end, but in some cases the only part of the document that uses PHP will be the editable part where the page content goes. Technically, you can also build the page with no PHP or content area as long as you still save it as PHP, but that would mean the page wouldn’t be editable through the WordPress admin panel.

The step-by-step process of setting up custom page templates is beyond the scope of this article, but the purpose of this post was just to explain the different between posts and pages. Hopefully this helps you understand how the use of templates for pages as opposed to templates for posts is central to using WordPress as a CMS for a traditional website.

RSS for sites with no RSS (updated)

[Author's addendum: As of September 30, 2010, Google will discontinue this service. According to their blog post, Page2RSS can perform the same service as Google Reader's "track changes" and can even convert your already existing feeds.]

I’ve been a big Google Reader fan for years now, and I wanted to point out a feature that may not get as much recognition as others. Sometimes you want to add a feed for a site that just doesn’t have a feed. Surely there’s a better way to look for updates than bookmarking and (ir)regularly scheduled visits, right?

Turns out you can add a site to Google Reader even without a true RSS feed available. Google will watch that page for you and generate a Reader item when an update is found.

For example, I want to keep an eye on OIT Current News. I click into Reader and “Add a subscription” like I normally would, then add the normal URL of the OIT Current News page.

Google tells me, “http://oit.ua.edu/news/current.html does not provide a feed. We can create a feed for you, notifying you when the content on the page updates. (Learn more.)”

So far it’s worked brilliantly; I’ve gotten Reader items for each of the last three OIT Current News updates. Just another way Google can help bring the web to you!