The hottest trend these days in web design is Content Strategy. It has a certain buzz to it like how search engine optimization (SEO) was like in years past. But what role does it play in our web projects. I’ll try to uncover how Content Strategy combines SEO and copywriting techniques and why web designers should practice it.

What Exactly Is Content Strategy?

Whats so important about Content Strategy? Effectively, Content Strategy is the planning, management and delivery of a website’s content formats such as text, images, videos and anything else you put on a it. It is closely related to SEO and copywriting.

How SEO and Copywriting Play Into Content Strategy

SEO is the art of designing a structured page meaning clean HTML markup that can be easily interpreted by search engines but filled with content that is helpful to people. A single web page is not very useful but a combination of pages that relate to each other so people using search engines can find a site based on keywords provided within each page and topic to help generate topical authority for a site.

By planning ahead what topics will be on the site, what headlines will be written and the supporting text and images prepared it’ll make our lives as web designers much easier.

Copywriting relates to SEO because effective writing highlights the topic, the web pages intention and is able to attract search engines algorithms and peoples’ search terms. With our content strategy plan, we have the blue print to stay focused on these topics.

Implementing SEO and Copywriting Techniques

By planning and organizing your content first such as declaring your marketing message, business purpose or goals; you’ll create pieces of content that help support the website. Each section of text will support a topic and these category topics will support the main topical theme of your site or micro-site. Other supporting contents are images with proper tags, internal links to pages so information and navigation has a good flow and well written copy to attract people and search engines’ attention.

As web designers, we should know and understand a combination of skills so we can create better sites that are both aesthetically pleasing and functional as well as being able to educate our clients. We already know basics to SEO and how to effectively write copy content for websites. We can create and prepare graphic images and photos. Most likely you have a blog and write to it regularly on your website as well.

Incorporating these skills together and planning a client’s or your own content for the web is how content strategy becomes part of the design process. Its a control mechanism to ensure that no task is left behind so we can minimize delays on our web design projects.

Further Reading On Content Strategy

Discipline On Content Strategy – From A List Apart, this article describes the discipline of practicing Content Strategy and why as web designers we should incorporate it into our design process. There are several other great articles on this subject at A List Apart and I recommend you reading them.

Content Strategy: The Philosophy of Data – From Boxes and Arrows offers how Content Strategy is not just about text but all data that pertains to a site. It is a great article to learn more about this topic.

Content Strategy For The Web Professional – From Lucid Plot gives a great summary for Content Strategy and how we should, as web professionals, practice this discipline and use them in our projects.

As I update the DesignRJC site, I run into a query issue for my Custom Post Types in WordPress 3.1 where the previous_posts_link() and next_posts_link() are not displaying properly. If you’ve been working with custom post types in WordPress 3.1 and have this issue, hopefully this will help resolve it.

Researching The Issues With previous_posts_link() And next_posts_link

Basically, the previous_posts_link() and next_posts_link() functions allow you to display the next set of posts being queried. In this case, it is a custom post type of portfolio items I created for DesignRJC to display projects, client work and concepts. You can read more on using the these functions on the WordPress Codex here and here.

Its maddening when something so simple as using a built-in WordPress function does not work properly and I had several hunches to try and debug.

At first, I thought it was the theme.  Currently testing the capabilities of building out a child-theme using Justin Tadlock’s Prototype Theme. Unfortunately, not being an exclusive member of their support forums doesn’t get me much help.  Still not 100% sold on child-themes and relying on a framework but it definitely has its positives.

Began double-checking the custom post type registration functions to make sure the re-write slug name for portfolio post type is different than the page template name used.

Everything checked out okay on that end as well.

I then study the query itself within the page template.  The query I use for the portfolio post type is:

<?php
    $paged = ( get_query_var( 'paged' ) ) ? get_query_var('paged') : 1;
    $args = array( 'post_type' => 'portfolio', 'posts_per_page' => 2, 'paged' => $paged );
    $loop = new WP_Query( $args );
    while( $loop->have_posts() ) : $loop->the_post();
?>

From reading other people’s experiences, it seems that my query is correct because of creating the variable $paged = ( get_query_var( ‘paged’ )) ? get_query_var( ‘paged’ ) : 1; line of code. This didn’t resolve my problem.

Solution For Fixing previous_posts_link() And next_posts_link() Properly For Custom Post Types

I came across another solution for displaying next_posts_link() and previous_posts_link() functions correctly.  It required the use of a second parameter of $max_number_pages. In short, it passes the total number of pages to be paginated within this custom query. This solved my issues and here is the snippet of the code I used:

<?php previous_posts_link('« Previous', $loop->max_num_pages); ?>
<?php next_posts_link('More »', $loop->max_num_pages); ?>

Notice in both functions, the second parameter is used.  By default, it is set to zero to display all pages.  Pagination for custom post types require extra finesse.

Where it is $loop->max_num_pages, $loop is the original query variable object from above and by using max_num_pages, I pass the total number of pages to be paginated into the second variable from the query.

Very helpful hint and fix to working with WordPress custom post types. Credit goes to WPCanyon for coming up with this solution.

When it comes to design, it is normal to quickly develop mock up websites or sample web graphics for clients.  We often use dummy text  or placeholder content known as “lorem ipsum”.  Lorem ipsum are the first two words typically used for any dummy text that is auto generated.  It is a sample text that is used to mimic content without any meaning.  It provides a natural flow of characters grouped together to mimic the flow of real content giving clients an idea of how a block of text will look in a given space, content box, web browser screen or web page.

How To Generate Your Lorem Ipsum

Rather than doing a search for dummy text or lorem ipsum and then copying and pasting it every time it is needed; there are definitely faster and more efficient ways.  Several ways of quickly generating lorem ipsum dummy text are widely available on the internet either as a website application, a browser add-on extension or software plug-in.

This old-school way involved  avoiding repeat visits to your dummy text website by creating a new text document and saving the generic lorem ipsum paragraph.  Have it on your desktop to be  handy so you can use it at any time for your copy and paste action.  However, this is an inefficient way.

If your looking for quickly generating while working in a browser, you can head on over to this website, the lorem ipsum generator site.   It provides several options so you are able to generate based on number of paragraphs, words, bytes or lists.  Not bad as its pretty customizable but how custom does it need to be since it is only dummy text used for a mock up website design or web graphic.

Better yet, if you are using Google’s browser, you can use this lorem ipsum Chrome extension to quickly access your placeholder content anytime.

If your working in Photoshop, you can download an extension plug-in that generates placeholder text.  This plug-in adds an additional panel that helps generate a “lorem ipsum” paragraph.  This is useful especially when designing the look and feel of a website theme without any content.   The plug-in can be found at the Lorem Ipsum Photoshop CS4 Extension, and it is easily integrated and installed.

Now, many text editors like TextMate, Note++ or my current favorite IDE (internal development environment) Coda allows you to save snippets of code and quickly access them via a set command text.  For example:  In Coda, I have it set so when I type “lorem”+ tab button, it automatically generates a paragraph of placeholder text.

The options are endless and if you really want, you can even do a system wide setting such as using an application like TextExpander.

How to Properly Use Dummy Placeholder Content

We’ve shared several locations on the internet to find lorem ipsum text but let’s not go overboard slapping dummy text all over your designs now.  So when does one use placeholder content?  Here are some general rules to follow:

• Use dummy text when the client has not provided any content
• Before using lorem ipsum for headings in your designs; it is better to establish your style guidelines
• Placeholder content should be used in wire frames, not visual themed designs (hopefully you already have some established content)

How Do You Use Lorem Ipsum In Your Design Work?

How and where do you get your dummy text?  Do you also use some sort of plugin for your programs?

I love reading Smashing Magazine as it is extremely helpful for an aspiring graphic designer slash web developer.  When they were advertising the release of their book Smashing Book, I pre-ordered right away.  I had great hopes and they sure delivered a book chock full of ideas, concepts and smashing content.

The Good

As always from the writers, content is key.  This book touches upon most topics that are relevant for any designer focused on the web as its medium.  The topics range from taking full advantage of CSS for layouts to typography options as well as color theory.  It covers on the fundamentals of user interface design and usability concerns that may not be something we may care as much as typical graphic artists.

Besides the graphical topics it covers, the book also covers the operations and business aspects that one may neglect.  From learning pieces of good coding for optimizing SEO to optimizing performance on websites.  There is also references to utilizing the free analytical tools to track metrics and conversion rates.  Finally, it teaches you to be aware of marketing and branding.

Another highlight subject is the insight Q&A from the authors.  This definitely provided ample rations of food for thinking.  It ends with a story of the Smashing Magazine.

Its a good amount of tips and insights that you may not gain from another book.  In addition, there are the references for you to further develop and learn on the topics the books chapters touches on.

The Bad

I can’t really fault any of the content in the book.  After all, its written by some of the leading minds in this industry.  However, I would have expected the book itself to be much better constructed.

The book is smaller than what I’d like.  I mean, the content is colorful full of graphics, screen shots and examples, it just begs to be done in a proper format like a coffee  table book.

The binding of the book, as others have reviewed, is horribly constructed as you have to be extremely careful when reading or else the pages may come apart.  Add to the problem is that the page layouts are tight where padding is minimal for the amount of content crammed in.  It makes reading the content much more difficult without opening the book up.

There is definitely some errata as well in terms of spelling and reference.  Particularly of note, in the chapter on usability, they reference a website that is clearly of the Korean language but state it as Chinese.  Small error but being international; they need to recognize this.  Korean and Chinese writing is completely different.

Finally, this book took way too long to arrive.  I pre-ordered in August and hoped it would have arrived in October.  It did get to me until December, in time for Christmas.  But had I known, I could have probably picked up all the content in the book from other resources already.

Looking Forward to the Next Installment

I am fairly critical but I do look forward to the next installment from Smashing Magazine.  I hope Smashing Book Vol. 2 will be even better; from content to presentation to construction.  It’s been three months since I’ve received the book and just about the same amount of time since I’ve read through.  I guess, like their shipment problems, it just took me awhile to get to actually putting up my thoughts on book.

***I hear the book binding issue has been resolved, unfortunately, my book has not been fixed.  Perhaps they can send me a electronic .pdf version so I can actually use this wonderful book as a reference manual.***

Default WordPress allows you to display recent posts and recent comments through a widget.  However, as I develop my own theme, I want to be able to customize as much as possible without using a widget in my sidebar at all.

The problem is, displaying recent posts and recent comments is not as simple as just using a WordPress template tag found in WordPress Codex.  Instead, you will need to get creative and create a bit of custom code to grab the data from the database.

There are definitely some common code snippets used for WordPress but I found the ability to control and display recent posts and recent comments to be what I need most.

Displaying Most Recent Posts

There are several ways to display the most recent posts from just using the wp_get_archives tag to query_posts tag which involves using the WordPress loop.  There is a more customized solution that I found from Dino Latoga and its as follows:

<?php
$recentposts = get_posts('numberposts=12&category=4');
	foreach ($recentposts as $post) :
	setup_postdata($post);
?>
<li><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></li>
<?php endforeach; ?>

Displaying Most Recent Comments

Also from Dino’s post on commonly used WordPress code snippets is being able to display recent comments.  Unlike displaying most recent posts, it doesn’t necessarily uses any WordPress tags.  Instead, you are actually querying your database to grab the necessary information you want to be displayed.

Here is the code for displaying most recent comments:

<?php
global $wpdb;
$sql = "SELECT DISTINCT ID, post_title, post_password, comment_ID,
comment_post_ID, comment_author, comment_date_gmt, comment_approved,
comment_type,comment_author_url,
SUBSTRING(comment_content,1,30) AS com_excerpt
FROM $wpdb->comments
LEFT OUTER JOIN $wpdb->posts ON ($wpdb->comments.comment_post_ID =
$wpdb->posts.ID)
WHERE comment_approved = '1' AND comment_type = '' AND
post_password = ''
ORDER BY comment_date_gmt DESC
LIMIT 7";
$comments = $wpdb->get_results($sql);
$output = $pre_HTML;
$output .= "\n<ul>";
foreach ($comments as $comment) {
$output .= "\n<li>".strip_tags($comment->comment_author)
.": " . "<a href=\"" . get_permalink($comment->ID) .
"#comment-" . $comment->comment_ID . "\" title=\"on " .
$comment->post_title . "\">" . strip_tags($comment->com_excerpt)
."&hellip;</a></li>";
}
$output .= "\n</ul>";
$output .= $post_HTML;
echo $output;?>

There a tons of custom codes to make your WordPress installation that much more feature and content rich, but these two code snippets have helped me create a better user experience when combined with Tabbed Menu in the sidebar.

It is always nice to add custom features to enhance the user experience.  One of these enhancements is to add the an author’s bio information to an article he or she has written.  This is particularly useful because when reading a good article the user may be inclined to learn more about the author.

A quick snippet of the author’s information can help users relate to the author as well as help the author promote himself or herself.

Using the_author_meta tag to grab information

In WordPress, each registered user can fill out information about themselves in their profile.  This is found in the Dashboard under Users -> Your Profile.  Some of the meta information fields that are available by default are the following:

• Username
• First name
• Last name
• Nickname
• Email
• Website
• AIM
• Yahoo IM
• Jabber / Google Talk
• Biographical Info

By using the_author_meta tag in your single.php, you are able to pull the information regarding the author.  Of course, you will need all the strings that you can use with the_author_meta tag.  Here is a list of all the strings to use the_author_meta tag:

• user_login
• user_pass
• user_nicename
• user_email
• user_url
• user_registered
• user_activation_key
• user_status
• display_name
• nickname
• first_name
• last_name
• description
• jabber
• aim
• yim
• user_level
• user_firstname
• user_lastname
• user_description
• rich_editing
• comment_shortcuts
• admin_color
• plugins_per_page
• plugins_last_view
• ID

Course, you can read more about the_author_meta tag at WordPress Codex.

Sample Code Snippet of Adding Author Bio to the Post

A quick simple sample is to grab the author’s display name, bio information and website.

<div id="author">
<p>Written by: <?php the_author_meta('display_name'); ?></p>
<p>Quick Bio: <?php the_author_meta('user_description'); ?></p>
<p>Website: <a href="<?php the_author_meta('user_url'); ?>"><?php the_author_meta('user_url'); ?></a>
</div>

Adding the code above into your single.php after the loop, you will be able to display the author information.  You will need to style with CSS.

Adding Gravatar to the Author Bio

To further customize the author info, you may want to add an avatar.  Because gravatar is linked to your email and recognized by all WordPress installation, the only tag you need to grab your avatar icon is the following code:

<?php echo get_avatar (get_the_author_email(), '100'); ?>

The code snippet above is just a function.  Basically, you are calling the function get_avatar and the two parameters following is for the author’s email and the second is the size of the avatar.

Other Guides on Adding Author Bio Information

• Add an author’s bio to WordPress posts – Stranger in a Strange Land
• Displaying Author Pic and Bio in Your WordPress – Gabe Diaz

The sidebar for WordPress is typically where the archive, categories and other items are listed on your front page. However, as your categories and numbers of posts in the archive grow, so does the list; resulting in a really long sidebar.  Having a long sidebar can take up precious onscreen real estate.  It can also be a distraction to the user.

Tabbed Menu as the Solution

In looking how to save some onscreen real estate as well as providing a more slick interface for users to navigate for content on the site, designers can choose to create a tabbed menu.

In searching the internet, there were many solutions.  There are actually a couple of specific plugins for WordPress.  Although, it is easier to use a plugin, the widget based style is less customizable for my liking.

I found several resources on the tabbed menu mechanism and some required a lot of coding as well as using different javascript framework libraries to achieve such effect.

Implementing the Yahoo! TabView

In the end, I chose to use the method found on Rubiqube because it uses a trusted code source, Yahoo’s TabView.  Rubiqube does a good job of explaining implementation and reassures that this technique will work with WordPress.

Here are the steps I took to implement:

1. Go to http://developer.yahoo.com/yui/tabview/#start and read through the instructions.
2. You will need to paste the following code in the header part of header.php for the theme your working on.  This will allow your theme to load the necessary javascript for the tabbed view menu.

   <!-- Sam Skin CSS for TabView -->
   <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.0r4/build/tabview/assets/skins/sam/tabview.css">
   
   <!-- JavaScript Dependencies for Tabview: -->
   <script src="http://yui.yahooapis.com/2.8.0r4/build/yahoo-dom-event/yahoo-dom-event.js"></script>
   <script src="http://yui.yahooapis.com/2.8.0r4/build/element/element-min.js"></script>
   
   <!-- OPTIONAL: Connection (required for dynamic loading of data) -->
   <script src="http://yui.yahooapis.com/2.8.0r4/build/connection/connection-min.js"></script>
   
   <!-- Source file for TabView -->
   <script src="http://yui.yahooapis.com/2.8.0r4/build/tabview/tabview-min.js"></script>

3. Add the HTML code into the location of where you desire the tabbed menu, this is most likely somewhere in your sidebar.php.

<div id="demo">
<ul>
<li><a href="#tab1"><em>Tab One Label</em></a></li>
<li><a href="#tab2"><em>Tab Two Label</em></a></li>
<li><a href="#tab3"><em>Tab Three Label</em></a></li>
</ul>
<div>
<div>
Tab One Content</div>
<div>
Tab Two Content</div>
<div>
Tab Three Content</div>
</div>
</div></pre>

<pre><div id="demo"><ul>	<li><a href="#tab1"><em>Tab One Label</em></a></li>	<li><a href="#tab2"><em>Tab Two Label</em></a></li>	<li><a href="#tab3"><em>Tab Three Label</em></a></li></ul><div><div>
Tab One Content</div><div>
Tab Two Content</div><div>
Tab Three Content</div></div></div>

4. Do not forget to activate by enabling the Yahoo TabView by calling the  script with the following:

<script type="text/javascript">
var myTabs = new YAHOO.widget.TabView("demo");
</script>

5. Finally, make sure the tabbed menu is loaded on the desired page and the effects are working.  You can now begin customizing the content to be loaded.  Just replace items in the HTML code markup.
6. Once you customize what you want in each tab which is just a <li> element, you can add the CSS classes to style it to your liking.  The CSS classes used to style the tabbed menu are the following:

   .yui-navset {
       background: #E8F4FD;
       padding: 5px 5px 3px 5px;
       margin-bottom: 35px;
   }
   .yui-nav li
   {
       list-style: none;
       float: left;
       margin-right: 2px;
       text-align: center;
       font-size: 90%;
       font-weight: bold;
   }
   .yui-nav li a
   {
       text-decoration:none;
       color: #005288;
       display: block;
       padding: 8px;
   }
   .yui-nav li.selected a {
       background: #FFFFFF;
   }
   .yui-nav li a:hover
   {
       color: #000;
   }
   .yui-content {
       background: #FFFFFF;
       clear: both;
   }
   .tab-list li {
       padding: 8px;
       border-bottom: 2px solid #E8F4FD;
   }

Simple enough, I was able to implement it after reading both articles and having a rough idea on how to style it.  It works easily enough and I will use this for future projects as well.

If your running WordPress, you’ll know that if you want to log into the admin dashboard, you have to type in the URL for the login page.  This can be inconvenient if you set up a social website where you want users to be able to login.

Sure, a link to the login page can be done, but that requires one extra click and loading of the page.

WPDesigner has a great snippet of code to add to your theme so users can login from the front page.

The Code

You can download the code from WPDesigner.  But here is a quick preview of the code:

	<li>
		<?php global $user_ID, $user_identity, $user_level ?>
		<?php if ( $user_ID ) : ?>
		<h2>Control panel</h2>
		<ul>
			<li>Identified as <strong><?php echo $user_identity ?></strong>.
			<ul>
				<li><a href="<?php bloginfo('url') ?>/wp-admin/">Dashboard</a></li>

				<?php if ( $user_level >= 1 ) : ?>
				<li><a href="<?php bloginfo('url') ?>/wp-admin/post-new.php">Write an article</a></li>
				<?php endif // $user_level >= 1 ?>

				<li><a href="<?php bloginfo('url') ?>/wp-admin/profile.php">Profile and personal options</a></li>
				<li><a href="<?php bloginfo('url') ?>/wp-login.php?action=logout&amp;redirect_to=<?php echo urlencode($_SERVER['REQUEST_URI']) ?>">Exit</a></li>
			</ul>
			</li>
		</ul>

		<?php elseif ( get_option('users_can_register') ) : ?>

		<h2>Identification</h2>
		<ul>
			<li>
			<form action="<?php bloginfo('url') ?>/wp-login.php" method="post">
				<p>
				<label for="log"><input type="text" name="log" id="log" value="<?php echo wp_specialchars(stripslashes($user_login), 1) ?>" size="22" /> User</label><br />
				<label for="pwd"><input type="password" name="pwd" id="pwd" size="22" /> Password</label><br />
				<input type="submit" name="submit" value="Send" />
				<label for="rememberme"><input name="rememberme" id="rememberme" type="checkbox" checked="checked" value="forever" /> Remember me</label><br />
				</p>
				<input type="hidden" name="redirect_to" value="<?php echo $_SERVER['REQUEST_URI']; ?>"/>
			</form>
			</li>

			<li><a href="<?php bloginfo('url') ?>/wp-register.php">Register</a></li>
			<li><a href="<?php bloginfo('url') ?>/wp-login.php?action=lostpassword">Recover password</a></li>
		</ul>

		<?php endif // get_option('users_can_register') ?>

	</li>

Just copy and paste the code above into your sidebar or any other desired location where you want the login form on your front page.  You can do some CSS to edit the appearance so it fits your theme’s design.

Today, I decided that I needed to move my website, a WordPress, installation to a different location.  Since I was going to move and migrate my entire website, I figured I might as well choose an ideal location.

Being hosted on Bluehost meant that my primary domain resided in the root folder.  Any add-on domains were in their own sub folders or sub directories inside the root or public_html.  The downside to this is it keeps all the files to my primary domain unorganized in the root folder.

In order to have it organized, I wanted to have my primary domain folder reside in its own sub folder or sub directory.  I am not as comfortable in the server environment as my knowledge of working with the .htaccess file is limited.

I searched Bluehost knowledgebase as well as other sources and finally came up with a solution that would work.  It required modifying the .htaccess file. You needed to redirect any traffic hitting your domain name to the sub folder directory.

The code is as follows:

# Bluehost.com
# .htaccess main domain to subdirectory redirect
# Copy and paste the following code into the .htaccess file
# in the public_html folder of your hosting account
# make the changes to the file according to the instructions.
# Do not change this line.
RewriteEngine on
# Change yourdomain.com to be your main domain.
RewriteCond %{HTTP_HOST} ^(www.)?yourmaindomain.com$
# Change 'subdirectory' to be the directory you will use for your main domain.
RewriteCond %{REQUEST_URI} !^/subdirectory/
# Don't change this line.
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
# Change 'subdirectory' to be the directory you will use for your main domain.
RewriteRule ^(.*)$ /subdirectory/$1
# Change yourdomain.com to be your main domain again.
# Change 'subdirectory' to be the directory you will use for your main domain
# followed by / then the main file for your site, index.php, index.html, etc.
RewriteCond %{HTTP_HOST} ^(www.)?yourmaindomain.com$
RewriteRule ^(/)?$ subdirectory/index.php [L]

Once that was accomplished, I was able to have my files in a sub folder directory organized like the other add-on domains.

As a side note, since my website is using WordPress, it took a bit more delicate effort to get it working structurally.  One of the problems I had after the redirection to my .htaccess file is that WordPress kept rewriting my .htaccess file rendering the redirection code above useless whenever I updated the Permalink structure.

After hours of testing and trying to figure it out, I found my problem.  The solution is to make sure that once you have done the redirect code to your root .htaccess file, the WordPress Address (URI) and Blog Address (URI) both need to match.

For example, even though, my domain is http://yourdomain.com but the WordPress installation is located at http://yourdomain.com/subfolder, both WordPress Address and Blog Address URI’s need to point to the path of http://yourdomain.com.  I made the mistake of pointing my WordPress Address to http://yourdomain.com/subfolder causing a loop or an Internal 500 Server error.

Here are some additional resources for you if you are on Bluehost and also about to do what I just did.  This can save you lots of time, like 4 hours worth.

• Bluehost Knowledgebase
• Discussion and Solution at WebProWorld
• Another Bluehost Redirect Method

WordPress is a popular blog.  I did not know how much I would fall in love with developing on this platform.

For my installation, I have it hosted on Bluehost.  Since I installed it in 2007, I was not aware of its capabilities at the time.  I had it in directories nested two levels deep and also had it pointing to a different subdomain, http://blog.designrjc.com.  This is not ideal for SEO and it kept organization chaotic.

I had previously moved a WordPress installation to a different location on the server so I have had experience, but that one was a bit more straight forward.

There are several methods to move or migrate your WordPress to different locations on your server but I believe this to be the easiest implementation.

1. Backup your WordPress installation by downloading the entire contents via FTP as well as backing up your database.  Just in case something goes wrong and you need to do a re-install.
2. Create a new folder at the location of the directory where you want it to be in.
3. Log into your WordPress website
4. Go to Adminstration -> Settings -> General panel.
5. Change the WordPress address (URI): to the new location path of where all your main core files will end up at.
6. Change the Blog address (URI): pointing to where the new location is at.  In most cases, this will match the previous box.
7. Move all your files to the new directory into the folder you just created.
8. Now test to see if you have successfully moved and migrated your WordPress to the new location.

There are several things to note after you migrate.

1. If you were using Permalinks you will need to log into your Dashboard and update the Permalink structure.
2. Images may be missing from posts because they are pointing to the old path.
   • Old Path – http://yourdomain.com/wordpress/blog/wp-content/uploads/
   • New Path – http://yourdomain.com/newwordpress/wp-content/uploads/

Good luck on moving your WordPress installation to a more ideal location that is easier for you to keep organized as well as being SEO friendly.

Here are some additional resources and guides to help you with this:

• Moving WordPress via WordPress Codex
• WordPress Codex – Changing the Site URL