The video below demonstrates how we go about consolidating a group of webpages into a single one, and using anchor tags to create this menu effect. The instructions below detail the steps involved with using anchors in content and menus within the WordPress content management system (CMS).

Add an Anchor Tool to your WordPress Content Editor’s Toolbar

To create this effect in WordPress, we must first install and activate the TinyMCE Advanced plugin. With this plugin activated, access the TinyMCE Advanced settings (accessible from the Dashboard under the Settings options). On this screen drag and drop the Anchor button onto one of the main toolbars in order to add this to the WordPress editor options.

Add the Anchor Tool in the TinyMCE Advanced WordPress Settings (click to enlarge)

Create an Anchor Tag

Once you have configured your TinyMCE Advanced settings, creating an anchor in your WordPress content is easy and doesn’t require you to access the HTML. Simply place your cursor where you want the anchor, click the anchor button that has been added, and give your anchor a name.

Creating an Anchor Tag in WordPress (click to enlarge)

Give your anchor a simple name. There is no need to include the # symbol. The anchor button will create the proper HTML automatically.

Name an Anchor Tag in WordPress (click to enlarge)

Create a Menu Item Pointing to an Anchor Tag

Once you have created your anchor tag, you can add a new menu item or hyperlink that points to it. To create a new menu item, access the menu admin section, and add a custom link that points to the new anchor. The URL that points to the anchor tag is simply the URL of the anchor tag’s webpage (ending with a forward slash: “/”) + the # symbol + the name of the anchor tag. For example: http://www.example.com/webpage/#anchortag.

Create an Anchor Tag Menu Item in WordPress (click to enlarge)

Ideally, each menu item should point to an individual webpage. This is also the most SEO-friendly way to deliver content, as the title tag is so important. However, in many cases, the content simply hasn’t been created, so developing a menu system such as the one demonstrated above should suffice until more expansive content has been created. Interlinking amongst your website’s webpages is also incredibly important for search engine optimization, and anchor tag links can be very useful in adding to the repertoire of linkable terms throughout your content.

Because we hold privacy and security in such high regards, it is important to us that we communicate these client resources in a stable and protected manner. This blog post will discuss our strategies in building these client resource centers and discuss some of the security measures we take. It is important for any web media company, small and large, to be extremely organized, have strong communication with clients, and promote transparency, privacy, and security. We believe that this mode of communication satisfies this. If you have questions or concerns about our methods, please feel free to leave us a comment at the bottom of this post.

The Client Resource Center

A client resource center should communicate, in the most honest way possible, the full extent of the Client-Developer relationship. Our client resource centers serves as a customer’s account center and offers such information as:

• Descriptions of what contracted work we’ve performed for the customer.
• Project proposals, reports, and invoices.
• Links to a customer’s web presence including online business and social media profiles.
• Information about subscriptions to services we offer, such as our website backup services. For example, we’ll report how often a backup of a client’s website is made, when the last time a backup occurred, and a link to a backup (i.e. staging) website to ensure the client’s piece of mind.
• Web marketing information, such as data on backlink acquisition, SERPs rankings reports, competitive analysis reports, and more.
• Directions on accessing other aspects of client’s web presence such as accounts for Google Apps, MailChimp, etc.
• Instructions on using any specific aspect of a client’s website.

Password Protecting the Webpages

A client resource center should only be accessible by the client. You do not want your client’s competitors to get wind of what their web strategies may be. Since we have built our website on WordPress, we use the built in password protect option for this. If you are using static HTML pages, you can protect these at the server level using a method we describe below.

Ensuring Proper Search Engine De-indexing of Private Webpages

Making sure that your client resource pages are not indexed by search engines is of utmost importance! Even if your pages are password protected, the client’s name in the title could still mean that they’ll show up in a Google search. In the irresponsible case that a page is not password protected, then at least it won’t be displayed in search results.

If you are using a content management system (CMS) like WordPress or Drupal, you’ll be able to get a plugin or module that facilitates this. We use the SEO Ultimate WordPress plugin which adds simple checkboxes on each page to tell search engines not to index the webpage or spider any links on it. If you are using a static HTML page, you’ll need to communicate this to search engines by setting up a robust robots.txt file.

SEO Ultimate WordPress Plugin Settings

If you forgot to make these configurations, and a webpage does appear in search engine results, keep in mind that by verifying your website in Google or Bing Webmaster Tools, you can request that the page be de-indexed.

• Remove a page or site from Google’s search results
• Removing content from the Bing Live Search index

Securing Files at the Server Level

CMSs like WordPress do not come built in with robust password protection features for files. At best, the WPMU DEV plugin Membership might obscure the filename, but this is a bit nonsensical because anyone who discovers the file’s real URL can then download the file. Even after installing the Membership plugin, one still needs to secure the file outside of the CMS.

To do this on a UNIX/Linux server, you’ll want to take advantage of the .htaccess file. You’ll create a .htpasswd file that contains encrypted username and password information, and place in a directory on your server inaccessible to web browsers.

Sidenote: This is a good example why I urge clients not to assign their public html folder to their server space’s root folder when they are allowed to do so.

With a .htpasswd file created, you can then place .htaccess files in various directories to password protect them. Rather than explain all this in detail, you can go ahead and read this Comprehensive guide to .htaccess. That tutorial will point you to an amazing little tool to help you create the encrypted username/password content that goes in the .htpasswd file: DynamicDrive .htaccess Password Generator. Always be sure that your files are password protected with the correct username and password set.

Using Windows

If you are using a Windows server as your host, you’ll need to do your own search for windows web server file authentication. You may want to check out How to configure IIS Web site authentication in Windows Server 2003. You might also check out IISPassword, an htaccess equivalent for Windows.

Encrypting Text

There are additional ways to further protect communication and files. You can easily password protect PDF files in Adobe Acrobat. There are also programs that allow you to encrypt and password protect any generic file.

If you are simply looking to encrypt text, you may want to check out Encipher.it. Encipher.it takes an encryption key (i.e. password) and uses it to encrypt text. This can be used to communicate securely with a client via email. Provide a client with a password, and then inform the client that you may use this tool to send encrypted text. In initial consulting meetings with clients, it may be wise to demonstrate this tool, so you don’t terrify them when you send them an email with text that reads like so:

This message is encrypted. Visit https://encipher.it to learn how to deal with it.

EnCt2d54ad16761c34b661e71d3c6a987f3c5e0ab85bfd54ad16761c34b661e71d3c6H1sFuVgrMQF u2vkOZ044l1RKY3kmY3+kMD/SpWh9wjgQ6dbMGKHjIPS1a4D8yGArtJbcWmaZvjvVolsNBJyH1ujJjMv tgp+VHiU7mavBsXYIdJDx+kvpOzH4e/blJpLTIwEmS

By the way – the encryption key for the above text is Holistic Web Media.

WPMU DEV’s Membership WordPress Plugin

Though we do not utilize it when building client resource centers, it might be prudent to mention the premium plugin developed by WPMU DEV called Membership. There is also a free version you can try if you don’t have an account with them. Unfortunately, this plugin doesn’t work quite as elegantly as one might expect. As mentioned earlier, the plugin only essentially obfuscates filenames. Another major flaw is that when a non-authenticated user attempts to access forbidden content, they are taken to a 404 error page instead of a login page. Admins on the WPMU DEV’s forums have explained that this is not a design or functionality flaw. Rather, due to the increased amount of queries placed on WordPress for these features to exist, the tradeoff between functionality and speed does not balance out. One benefit that may come from use with this plugin, however, is their use of secure shortcodes. After configuring user accounts and permissions, you can utilize shortcodes to display content to only a certain group of people. Rather than used to create private client resource centers, the Membership plugin is a more focused plugin designed to create actual membership subscriptions, say, for a WordPress multisite + BuddyPress social networking site.

Enterprise Class Email Protection

If you’d like to really go above and beyond, and you have the funds to do so, you can use Cisco’s registered envelope service (RES) to encrypt and password protect emails. Though we do not use this service, we are familiar with it. Encipher.it may suffice, but if your company starts to deal with higher end clients you might end up wanting to acquire Cisco’s services. This is definitely an enterprise class service, though.

Obfuscating Email Addresses

It has become common practice to obfuscate email addresses within the webpage’s code. This is because spam operations send spiders out to collect non-obfuscated email addresses. Though spam filtering systems in major email systems like GMail have greatly evolved, it never hurts to further protect emails on client websites. WordPress plugins such as emObA – Email Obfuscator Advanced and other email obfuscation PHP scripts prevent spam spiders from detecting email addresses.

A Funny Note on Password Strength

Obfuscating a mnemonic word with letters and special symbols is quite popular. Many people have their own elaborate substitution systems memorized for transforming a word into some sort of leet speak. For example, ”password“ can become “P@$$//0|2D!”. However, the web comic xkcd has a funny take on password security, and makes the point that a longer, non-obfuscated mnemonic phrase is actually more secure.

xkcd: Password Strength (click to enlarge)

• Featured image credit.

Prelude

First off, the biggest obstacle I face when trying to explain what the benefits of Twitter are is this misconception that it is only really used to share minutia, such as what you just ate for breakfast or what concert you and your friends are attending. I call this the “Ham Sandwich Perception” and will discuss this in a subsequent blog post. The technical term for Twitter is a “micro-blogging platform”. And yes, it can be used for sharing minutia, and I have used it for such. And yes, it seems that way too many of the people on Twitter are all about Lady Gaga and Justin Bieber.

However, Twitter has become an important tool for business marketing and news syndication. Many businesses can be found on Twitter – and they are often very responsive. Twitter is also becoming a very important social analysis tool. Did you know that all of Twitter’s entire public archive has been donated to the Library of Congress. Twitter has already provided valuable data to linguistic researchers who can utilize this social network to analyze moods and changes in human behavior. Some people claim that Twitter can change your life, and many feel more private on Twitter than on Facebook because conversations are generally less dramatic.

Also, you do not need to Tweet in order to take advantage of Twitter! You also don’t even need to set up an account. Having an account just gives you more options. One day I was sitting at my desk while working for a company in downtown Portland. A coworker came in, and explained how downtown was a mess, and that there were tons of fire engines and people down the block. I immediately searched, on Twitter, for “Portland fire”, and within moments was explaining how there was a small smoke fire on the second story of the World Trade Center, but that no one got hurt, and that everything was under control. Having Twitter at your disposal can help you impress your friends – and you don’t even need to have an account.

That being said, this tutorial is designed to give you a crash course. Similar to being pushed into a pool when you want to learn to swim. Most importantly, you should have fun with Twitter.

Orientation

If you are totally clueless about Twitter, then read through some of the beginner Twitter guides. At least familiarize yourself with them and keep them in mind as you go further. You can also find plenty of information from search engines. Of utmost importance is the official Twitter Help Center.

Because Twitter is so pervasive, popular, and in its own way unique, there are a plethora of Twitter help guides on the internet. Therefore, we aren’t going to discuss specific ways to complete these steps. Keep Google and some Twitter guides handy. We’d rather not reinvent the wheel. Less than an informational post, this is a directive for the reader to take certain actions that may help him/her get their foot into the door of Twitter. Good luck.

Basic Setup – Come Alive

Follow these steps to, at the very least, get started. Check these off then proceed to the next step to start actually tweeting.

1. Create and verify a Twitter profile.
2. Update your Twitter profile image. The default Twitter egg icon is unacceptable.
3. Update your profile background to something other than the default clouds background. Bonus points if your background is unique, and not one of those provided by Twitter.
4. Write something in your bio description so that it is not blank. If applicable, also input your website’s URL and location. Pro-tip: you can include hashtags in your bio (if you’re not sure what a hashtag is, consult the Twitter guide).

You should now have a personalized Twitter profile. Many people will refuse to follow you if you do not take the time to complete these basic steps.

Grow Your Presence

You will now start to grow your Twitter presence. Let’s start tweeting.

1. Compose and publish your first tweet. This can be anything – just do it.
2. Discover a hashtag (trending topicsdo not count) that you might like. To do this, search for something and read through some tweets to see if you can’t see how others are tagging their tweets. It can take some time spent on Twitter before discovering niche specific hashtags, so keep it simple for now.Hint #1: if you have a hobby, think of an acronym that describes it, like #MTG for Magic: the Gathering. If you are political, check out some of the mainstream hashtags like #tcot and #p2. If you are a fan of a sports team, they no doubt will have one or more associated hashtags like #GoBeavs. Try to find local-based hashtags like #PDX.Hint #2: Check out hashtags.org or tagdef.com to find new hashtags and their meanings.
3. Compose and publish a tweet that includes the hashtag of your choice. Bonus points if this is a reply to an existing tweet that you’ve found.
4. Sign up for an account with a mainstream URL shortening service. Goo.gl and Bit.ly are two of the more popular ones. Pro tip: If you already have a Google account, you can use that to log in to Goo.gl.
5. Find a webpage that you’d like to share (in the next step). If you have a website, you might use its homepage or another important page on the site. If you have a blog, you might want to share your latest blog post. If you recently read an interesting article, choose that.
6. While logged in to your account at your URL shortener, create a short URL of the web address of the webpage you’d like to share (from previous step).
7. Compose and publish a tweet that includes the short URL you just created. Bonus points if you include one or more applicable hashtags.

Dig a Little Deeper

This exercise will get you started using a third party Twitter application by taking advantage of HootSuite to schedule a future tweet.

There are several third party social media applications that help you to become better organized managing your social networks and connections. Many of these provide for integration with Twitter as well as other networks such as Facebook, and provide mobile applications as well as desktop or browser based ones. Some of the more popular applications for Twitter management are TweetDeck, HootSuite, Seesmic, and Socialite. Other third party systems are used for image sharing, such as Twitpic and yfrog. For this homework assignment you will use HootSuite since it is one of the more popular apps and allows you to schedule future tweets – a very cool feature. Take note that HootSuite is not the only application you can use to schedule tweets. Others include Twuffer and LaterBro. If you don’t want to deal with HootSuite at this time, you can go ahead and experiment with some of these other third party systems instead for this exercise. We’ll hold off on discussing image sharing so as to not bombard you with even more Twitter minutia.

Scheduling tweets is a great way to make your Twitter feed look more active than it is. It is also helpful when you are bombarded with several good links you’d like to share and don’t want to tweet five things all at once. Scheduling tweets is a great way for a company to make itself look hyper-social, but beware: scheduled tweets may give other users who have asked you a question via a Twitter mention may take offense that you are seemingly tweeting and ignoring them.

1. Sign up for an account Hootsuite. Hootsuite is a browser-based social media communications dashboard. There are other third party applications that allow you to better manage your social media profiles including Twitter, but for the sake of simplicity we’ll focus on Hootsuite, which is useful for its feature to schedule future tweets.
2. Log in to Hootsuite and add your Twitter account.
3. Schedule a future tweet.

Go ahead and explore HootSuite if you’d like. This might be a bit much for now. Learning new technology requires pushing yourself outside of your comfort zone.

Start Rooting Out

Now that you are on your way to mastering the art of tweeting, you might want to expand your network.

Find a tweet you find interesting and retweet it. It helps if the person you are retweeting is someone you’d like to follow. In that case, follow them as well.

Find others to follow and connect with. Either do this for searching Twitter or by clicking the “Who to Follow” link on the Twitter main menu. This provides you with some help finding Twitter users, including a feature to find friends from existing services such as GMail and LinkedIn.

Follow at least 10 other Twitter users. Feel free to follow Holistic Web Media as well.

Spread Yourself (optional)

Now that you have established a presence on Twitter, you may want to promote your Twitter account. You can do this by announcing your Twitter presence on your Facebook or Google+ profiles or include a Twitter icon on your website.

At this point, you may start to see others follow you. By default, Twitter will email you when someone follows, retweets, or mentions you. The key to growing your network is consistency and persistency. Many users will follow back. Better connections can be made if you interact with others.

Have fun tweeting and keep at it. In the coming weeks we will launch another blog post that touches on more advanced Twitter topics.

Post Featured Image Credit

This post describes what I believe are the most elegant and efficient methods to generate a short URL and publish a tweet directly from within the administration sections of the Drupal and WordPress content management systems (CMSs) without constraint. This blog post focuses on minutiae that may make what is generally a short process even shorter. However, making an easy process even easier never hurts. Integrating Twitter updates into a CMS backend will also help increase your tweet rate, and can serve as a reminder to clients to utilize their Twitter accounts. Please note that this post does not touch on the installation or configuration of Twitter, the modules/plugins mentioned, or URL shortening services.

A Need for CMS Backend Twitter Integration

There are an enormous amount of WordPress plugins and Drupal modules that have some kind of functionality involving Twitter. It seems people are obsessed with jumping on the Twitter bandwagon, wanting to each developing their own little knick-knack. Many are used to list Tweets in a sidebar, some are used to place icons somewhere on the page, and others give readers quick options to share content. Then there are a myriad of plugins claiming to help you post tweets after blogging. While many have multiple options, most of them are simply inefficient, not useful, or just plain silly.

Here are the two basic requirements of the functionality I like to see when considering tweeting from within a content management system (CMS):

1. Complete flexibility in composing the tweet. If I so wish, I want to post a completely random tweet from within the CMS, and not be hindered by any required prefix or suffix text. This is such a simple requirement but yet so hard to find.
2. Proper integration with mainstream URL shortening services such as Bit.ly and Goo.gl. I want to configure my settings, then be able to easily create a URL shortcode from within the CMS from my registered account at the shortening services website. Note that this usually requires entry of an authorization key during configuration. In this way, I don’t have to log into the shortening service website to create the short URL, but can log in later to retrieve statistics about that URL.

Then there are all kinds of other features that usually come bundled with existing Twitter posting WordPress plugins/Drupal modules. Many promote themselves by saying they will “automate” posting of a Tweet when the blog is posted. This is an absurd feature I would rarely ever wish for. A blogger that takes care of his content should not be so reckless in publishing a short tweet to market that content. The posted tweet is most certainly not going to be optimized or include relevant hashtags. A tweet marketing a blog post might also best be worded in way radically different from the blog’s title.

Tweeting from Within Drupal

An early elegant solution for tweeting from within a CMS comes in the form of a Drupal module simply named Twitter. This module adds a small input box below the content editor and essentially will allow you to post a tweet by simple inputting text into this box, marking a checkbox, and updating the content. You could even customize the default tweet (i.e. the default text that would show up in the input box). This would allow you to add several hashtags to this default text and pick and choose when sending a new tweet. You could use selectors to insert the title (or not) and a short URL using the TinyURL shortening service. This module doesn’t provide complete integrate with other URL shortening service.

Tweeting from within Drupal using the Twitter module. (Click to Enlarge)

The Twitter Module can be found here. I haven’t tested it in a while, and have not tested it on Drupal 7 (only Drupal 6). If anyone reading this knows of another elegant way to tweet from within Drupal, please let me know in the comments section below.

Tweeting from Within WordPress

It is amazing that WordPress took so long to provide such functionality. Most plugins in the past were ridiculous, and would force the posted tweet to be formatted in a certain way. One plugin required that some sort of teaser text (such as “New Post: “) be prefixed to the tweet in order to function. However, there have been some improvements in this regard, and some new plugins now can be used to add a very neat Twitter integration to your site. I found that, for me, the most efficient and elegant solution was by combining the WordPress plugins WordPress Dashboard Twitter and the URL Shortener Plugin.

WordPress Dashboard Twitter Plugin

WordPress Dashboard Twitter is a nifty plugin that essentially builds Twitter into your website’s Dashboard with a widget. This is awesome for on the go blogging or site updating. Even if you weren’t planning on checking up on your Twitter account, you can still take a quick peak. This plugin allows you to send a tweet from the Dashboard. Perfect. At the time of this writing, the plugin supports the wp.gd, tr.im, and bit.ly URL shortening services. However, it appears to be lacking association of these services with an existing account. Therefore, this plugin alone does not satisfy the second of the two requirements I listed above.

URL Shortener Plugin

The URL Shortener plugin is simplistic, to the point, and highly functional. It is what I call a utility plugin. It provides niche functionality extremely well. At the time of this writing, it provides service configuration for 22 different URL shortening services, including bit.ly and goo.gl. It has some great additional options. You have the option to insert the short URL in your content with a shortcode and even adds an extra button in the edit permalink section (see screenshot below). The kicker? It even provides a QR code of the short URL that you can append to content.

URL Shortener button in WordPress content edit page.

Fast, Perfect Tweets

With the two above-mentioned plugins, it is easy to go from publishing a blog post to publishing that perfect tweet very quickly. You simply grab the short URL from the content’s edit page, return to the WordPress Dashboard, compose a customized tweet with hashtags and all, and submit.

This tweet was sent from the #WordPress Dashboard using the WordPress Dashboard Twitter plugin. http://goo.gl/Oy32O #WP #SMM #SM

July 14, 2011 6:18 pm via WP Dashboard TweetterReplyRetweetFavorite

@HWebM

HolisticWebMedia.Com

Note: the tweet displayed above was generated with the Twitter Blackbird Pie plugin. Read more about this and other ways to spice up WordPress content.

GoDaddy

GoDaddy is one of the more widely known and used web hosting providers and domain name registrars. Many people know them from their racy, highly sexual commercials featuring Danica Patrick. It should be a huge red flag that a company in the web services industry like GoDaddy should choose to appeal to the Super Bowl crowd using sex. They certainly can’t promote their prices or customer service to their benefit. Their CEO was also recently in hot water for self promoting his shooting of an elephant, which resulted in native Africans hacking the beast to pieces while wearing orange GoDaddy hats.

GoDaddy is a money hungry hosting provider that overcharges and offers, in my opinion, limited poor support. There are no options for an online chat, and their phone support is, in my experience, lackluster. This is in stark contrast to companies like FatCow, which offers a highly responsive and helpful 24/7 online chat, or Media Temple, whose phone support line isn’t perfect in terms of wait-time but always results in a very smart, enthusiastic, customer support engineer on the other end.

GoDaddy may appear to be the equivalent of a churn and turn factory. As a WordPress developer, I am not able to create my ideal WordPress configuration on sites hosted with GoDaddy. As with Network Solutions, the Automatic WordPress Backup (AWB) plugin is incompatible with GoDaddy. Since they limit the scope of a developer’s options, the out of the box open source solution I desired would not function. I did contact GoDaddy about this once to resolve the incompatibility issue, but my attempt was fruitless. Therefore, a developer may have increased difficulty delivering the services they promise to their clients because of limitations.

Online I found accusations of GoDaddy stealing domain names out from under their own customers. If you accidentally forget to renew a hosting plan, GoDaddy will not call you, but instead just completely delete the website’s files and database and demand $150 to restore it. This actually happened to a client of mine. I was able to assist the client, but I feel for the folk who end up losing their website. There are reports that GoDaddy has also stolen domain name ideas!

I have noticed a speed increase on a website when moving it from GoDaddy to another hosting provider. GoDaddy has gotten some poor publicity on the WordPress forums from users complaining that WordPress is “unbearably slow” (note that GoDaddy has made responses on the linked forum thread). One possible solution to the problem of WordPress being slow on a GoDaddy account? Switch hosting providers. When we consult, we recommend avoiding GoDaddy for anything, including registration of domain names – even if they are on some kind of sale. One user claims in a blog post to have “had several domains rejected for transfer” and let the domain names go.

For their bad publicity, high prices, and lackluster service, it is surprising that GoDaddy continues to be a powerhouse in the industry. With enough vigilance, we can help others avoid the calamities of GoDaddy hosting by warning them beforehand and urging them to switch hosting providers.

Network Solutions

Network Solutions has frustrated developers who online have rant about their complete lack of service. Like GoDaddy, they’ve included some hindrances built into their service to irk developers. As with GoDaddy, the Automatic WordPress Backup plugin is incompatible with Network Solutions. Like GoDaddy, Network Solutions also faces accusations of the egregious act of stealing domain name ideas. Network Solutions has also been accused of selling personal information to outside marketers.

For some reason, a CMS like WordPress runs incredibly slow on Network Solutions accounts. I have seen this firsthand.

GoDaddy and Network Solutions are Overpriced!

GoDaddy’s hosting plans start at $4.99 a month. This hosting can be used for only a single domain name. Other hosting providers offer a hosting pans for less per month (sometimes as low as $3.50), but allow you to attach unlimited domain names, bandwidth, email addresses, and databases. If you want more than 25 databases on your GoDaddy account, you’ll be asked to fork over a whopping $14.99 per month. Network Solutions also has overpriced plans with limitations that are complicated and confusing. Their unlimited plan costs a gigantic $27.18 a month! They do have some discounted WordPress hosting plan. However, this is just a huge gimmick. Your standard web hosting plan doesn’t need any special qualifications to host a WordPress website. This is surely a marketing scheme response to the fact that word has spread that their hosting works sooo poorly with WordPress. Network Solutions also offers big sales by offering three years of hosting for the cost of two. I pity the fool who gets trapped with that hosting company for three years.

Before signing up with GoDaddy or Network Solutions, be sure to look into hosting providers like HostGator, FatCow, Bluehost. Those are only a few of the many web hosting companies that are both more affordable than and superior to GoDaddy or Network Solutions. Some hosting companies also buy wind power credits to offset their energy usage. As such, they are EPA Certified Green Partners, and in choosing such a company, you’ll be able to claim that you’ve gone green with your website as well. And as an added bonus, buy choosing a different web hosting provider, you’ll never have to face that embarrassing moment when someone asks you who you’ve hosted your website with.

How Holistic Web Media Deals With These Bad Web Hosting Companies

At Holistic Web Media, we no longer have to deal with GoDaddy or Network Solutions as all of our current and past clients utilize different companies. Working with a company like Network Solutions or GoDaddy incurs additional service costs and risks, and may cause delays in project timelines. In all cases, it is more cost-effective to transfer existing websites to a different hosting provider. Our contracts make mention of hosting providers, but before taking on a new client, we ensure that they understand the importance of working with a good hosting provider. We offer affordable prices in helping clients achieve this transition. In the past, when forced to work on sites hosted on GoDaddy or Network Solutions, we simply had to make it clear to the client that existing software solutions didn’t work and the site was so slow because of a third party. For us, this has indeed turned out to be the case in all past situations where one of these hosting providers was suspect of causing speed issues. We simply cannot make the same guarantees to clients when working with GoDaddy or Network Solutions. Since we are a company that always want to offer the best service possible, bad web hosting providers just simply do not have a place in our business model.

Why Do People Still Give Their Money to Bad Hosting Providers?

Of course, no one can completely answer this question, but it may be due to a combination of market permeation, aggressive marketing, and general naivety. Many times people go with name recognition or choose the same company their neighbor went with.  Existing customers might be averse to taking the time to switch hosting providers even when the financial gains are high enough. It may just be that as web professionals we simply have done a bad job in both guiding our clients and being vocal about our trade. However, companies that are consistently doing bad business will not last in our capitalist economy, no matter how much they pay the Better Business Bureau.

Summary

In the past several years, the premium website theme industry has exploded. Professional grade website themes designed by world-class designers are now available extremely cheap. Using these themes decreases costs in incredible ways, while minimizing maintenance problems and providing a superior product overall.

Business may still consider custom-from-scratch theme design, but should be aware that money saved on design can be put into marketing, social media, and content creation – business issues that are often overlooked during a website’s startup. New themes (i.e. designs) can often be applied to a website if it is based on a common content management system (CMS) like WordPress and using a standard content structure. Using a premium theme reduces initial costs, project timelines, risk, and switching costs.

The Difference Between Premium Themes, Free Themes, and Custom Theme Design

First off, let me explain the difference between a premium theme or free theme from custom theme design. A premium theme is a professionally made designer website theme that can easily be applied to a new website. There are several websites that sell premium WordPress themes, such as ThemeForest, Templatic, and WooThemes. A free theme is a theme available that can be applied to a website, but usually are of less quality and have less support. On the other hand, custom theme design involves the process of wireframing (i.e. hand-drawn/computer created layouts), graphic design, and programming to create a theme from scratch to fit requirement specifications exactly.

If you are a small business looking for a website, your best option may very well be to use the best stuff out there and keep it simple! This is where we absolutely excel. Not all businesses will settle for a premium theme, but each is different, and that’s OK.

• Read our blog post on why A Website is Much Like A Hollywood Celebrity, where we compare web design to fashion design and touch more on the issue of this blog post.

Premises

The premise of this article is that by actually spending less money and commissioning less custom design at startup will actually produce a better product in less time.

1. Of course, the best things in life are free. But in reality, at least in a business sense, there is nothing worth more than money (and time=money).
2. Many organizations make the mistake of believing that custom design is the ultimate end-goal of a website’s startup mission. For most, this is an expensive mindset that ignores other key elements of website startup.
3. Spending a lot of money on custom theme design during website startup will not save you money down the road. In fact, the opposite is true. The more custom code you pay your developer / designer to write, the higher your future maintenance and switching costs become.
4. Just because you pay a designer thousands of dollars does not mean you will receive a website that is more useful, aesthetically pleasing, and effective than if you had paid less than a hundred. In fact, the best design you can possibly get may very well be one of your cheapest options.
5. Oftentimes, especially for websites with general functionality (like blogs or brochure websites), it is extremely easy to go from one design to another.

Let me start with a few premises and disclaimers. First off, I am assuming that my target audience are clients with limited budgets whose core competency is not design-based. Of course, your average restaurant is going to have a different budget and goal than the top-rated steakhouse in downtown New York. I am addressing startup websites that do not have a strong established visitor base. Also, Holistic Web Media offers design services, and I am not trying to minimize the importance of design work. Holistic Web Media does do custom web design, and we do it well. However, what is most important to us is that our clients are happy in the long-term and that the solution they receive from us are the absolute best for their needs.

But what about branding?! Don’t worry, I touch on this below.

If you are a designer reading this article, don’t fret. I’m not saying your services are not as important as development or marketing. I’m just saying that, in the same way I wouldn’t build a content management system (CMS) like WordPress from scratch, I don’t think it’s always necessary to build design solutions from scratch. Also, it isn’t necessarily wrong for a client to desire an absolutely custom design. We simply try to help clients who are on a budget better prioritize their work orders. Even fully custom websites are built on frameworks such as the Drupal framework Zen or the WordPerss framework Thesis. At Holistic Web Media, we strive to get websites started quickly and affordably, and let the client go wild in a comfortable manner.

Thesis #1: There is Nothing Worth More than Money (and Time = Money)

I don’t know how many times I’ve shocked people by insisting on this. It seems to me that many people who insist that “money isn’t what’s important here” are the ones who have extra loads of it. I’m not talking about life in general. Of course, being happy, being loved, and your relationship with your creator is what’s important, right? Hey! Stop being so sentimental! What better way to pursue the important things in life than to not waste all your money and free time on a website startup?

Now that that’s out of the way, let’s talk about what you’ll use your extra money for during website startup.

Thesis #2: Design is Not the Only Expense You Should Worry About When it Comes to Starting a Website

Let’s say you are a restaurant in a mid-sized town. Your passion is great Thai or Italian food. You love to cook, you love your customers, you love being the local food artist. Perhaps the most important thing to you is making sure that as many people in town come to try some of the curry or pasta. I would ask, “What should the point of your website be?” – to which many would respond, “To promote our restaurant and ultimately increase our customer base and revenue.”

That means the website not only needs to look good, but your restaurant needs to show up on Google Maps, have positive reviews on Yelp, and show up on search engines for basic searches such as “Newport Thai restaurants”. You want to eventually go after search keywords like “Newport food”, and you want a holistic web marketing approach that tackles social media and complements your non-internet marketing initiatives well.

Let’s say you go to a large web agency. They charge $2000 – $6000 for a custom built, fancy-dancy WordPress theme. You expense most of your entire website startup budget. What happens next? You aren’t showing up on Google, and you have to constantly go back to the web agency to fix design and security flaws. And the website, having been built, may not even be as high quality as a $35 premium theme available online. Then again, you could pay a freelancer $600 to build a website that is entirely HTML, looks bad, and just … fails. At Holistic Web Media, we’d propose you pay for a premium theme (and maybe some extra hours to tweak it a bit), and hire us to establish a modular, piecemeal, website based on open-source software and web standards.

The end result? You have a top-notch professional grade website with an extra couple thousand bucks left over for pure marketing or heck, maybe even an early vacation. If you have a budget of $2000 for your website, why spend $1200 on design when you should be putting that much into marketing?

Take a look at the Drudge Report website. If someone wanted a news website, and I built them that one, I would expect to get chewed out by the client. That website, however, has been lauded for what it has accomplished, because Content is King and the Matt Drudge’s marketing efforts are phenomenal. The Drudge Report has used simplicity and strong content and marketing to succeed. Without good content, marketing, and persistence, no amount of design work will save you. On the same note, if The Huffington Post (which has a great design) had awful content, it wouldn’t be nearly as profitable. The internet isn’t an art museum.

Thesis #3: Higher Initial Design Costs = Higher Long-term Maintenance Costs

Just because you spend thousands on a fully custom website theme doesn’t mean your budget is safe after website launch. They say that when you write software, you own it. If the code being written is rushed, it might not be optimized, and it might not be commented well (computer programmers insert comments into their code to make it more readable to other developers). Especially because the world wide web is ever-changing, you most certainly will eventually run into a situation where your custom code needs a workout, or there might just be a nasty bug. In that situation, you will have to hire the same developer to go back and fix the code. And don’t expect that developer to fix the code for free because he or she wrote it.

Enter Linus’ Law! This is a law applied to open-source software development. It is one of the reasons why open-source projects like Linux and FireFox are so successful. It states, essentially, that with a larger developer-base and community, the bugs and flaws are more easily discovered and worked out. This is one of the key reasons we use open-source software like WordPress and Drupal.

In a way, this law can be applied to premium themes. Though they may not be open-source per se (this is a matter of software licensing), almost all of the code is available to developers to look at. If you pay for a premium theme, there will be others addressing any issues. With more users complaining about a bug, the development team responsible will be more apt to fix it and release an update. So think about this! You paid $40 for the license to use a premium theme. The theme is still making money for the developers, who are eager to keep their customers happy and their reviews high. They fix bugs and release updates for you for free. Maintenance costs are nearly zero if you don’t have many theme modifications. Even if there is a custom modification needed for a theme, it might be easily discovered on a support forum. In the past, I’ve been commissioned to develop extensive theme modifications. Sometimes, instead of spending days coming up with a solution, I simply find a solution posted somewhere online that a fellow developer has already implemented for a premium theme.

It is wise to think about future expenses such as switching costs. A switching cost is a term every business student learns. It refers to the cost of switching suppliers. It isn’t wise to have a supplier that has total control. By commissioning an extraordinary amount of custom development and design, it increases your switching costs. For this reason, the development community admonishes “core hacks”, or modifications to an open-source software solution’s core. Though “hacking the core” refers to more specific open-source solutions (like WordPress or WordPress plugins), the same idea can be applied to themes. Even if you modify a premium theme, if you have to update it, you may also have to re-implement your changes. If you choose to switch to a different development / design team, you won’t have as big of a headache during the transition if your website is modular and built to standards.

Don't Hack Core

There’s a reason your new toaster oven and the International Space Station use Linux for its operation system! The open source methodology is more reliable and more affordable.

Thesis #4: Many of the Best Website Themes are Premium Themes and Many of the Biggest Stars in the Theming World Sell their Work Online.

The best way to get a rock star designer on your side is to buy a premium theme online. I’m being humble and honest here. I do design work and have built custom designs for websites. However, I’m not going to say that I’m the best in the world. I went to college for computer design and business, not graphic design. That being said, I do have considerable experience doing graphic design, CSS, and PHP to create custom website themes. I’d also say I’m in a pretty good position considering the amount of talent out there available at my disposal.

As in other career fields, there are the rock stars of professional WordPress theme development. As a small business owner, you are in a special position to take advantage of these rock stars without paying top-end prices.

Imagine for a minute that you are an absolute web design genius and run a successful freelance business designing WordPress themes. You have a brilliant epiphany about a theme you want to create. You have two options:

1. Get hired by a firm with enough money to pay you for your theming skills, or …
2. Build the theme, put it on a site like ThemeForest.com, and sell thousands of copies for $40 each.

By selling your theme online, you now have a potential continuous revenue stream well into the future. Not only that, but your resume and portfolio just got a lot better. You also will have a community that will help you improve your theme, and will have a strong reason to continuously improve on the theme. You’ve not only potentially made much more money in the long-run, but your overall reputation has improved a great deal.

Because sites that sell premium themes draw talents from all over the world, you will find a large international pool of rock star themers. Some of the themes you get are packed full of additional functionality and goodies that otherwise would not be included in your custom made theme.

Bottom line: Basing your website on a premium theme is a more solid and affordable foundation than commissioning a new theme from scratch.

Thesis #5: Saving Custom Design Work for Down the Road Might be a Good Choice.

If your website has straightforward functionality (such as a brochure website), it is oftentimes very easy to switch from one theme to another because of the architecture of content management systems like WordPress. I make this point especially for startup websites that do not have a strong visitor base. Let’s say you do want a fully custom design. If your startup budget is limited, you may want to prove that a web presence can be reasonably profitable for your business before expending your limited startup on an expensive custom design.

Addressing Additional Complexities of a Website

When a website requires additional functionality, it adds some complexity to the overall project. For example, e-commerce or BuddyPress websites require additional styling because of their added features. Building a fully custom website for these sites can require an even greater cost than normal. Utilizing a premium theme as a base for an e-commerce or BuddyPress website allows us to instantly start designing the additional styling necessary. This decreases overall costs as well as the development schedule. Some themes, however, come built in with functionality for e-commerce or BuddyPress.

Concerning Branding and Customization

Perhaps the biggest concern about using premium themes is that you will experience a lack of branding and that your site will be “generic”. Of course, there’s no denying that if you use a premium theme out of the box, your site might look like another one out there on the internet. However, there are more and more premium themes being launched every week. Many premium themes that are purchased do not go into use, and many are used on websites around the world that get little traffic. Modifying premium themes can often have the effect of creating unique aesthetics as well. It’s also easy to find premium themes out there that look anything but generic.

One of the main arguments I hear about using premium themes (these arguments usually come from design professionals who need to make money convincing clients of their need for constant custom design) is that it is difficult to integrate a custom corporate logo. The Life Tech Law website we built uses a premium theme but was customized to match the green style of branding that the law firm uses. Oftentimes changing the background and color scheme is enough to help accommodate a business’s branding, even if they use a complex Tuscan hues color scheme.

Designers often use common design concepts that can mirror other website designs. I’ve seen custom designed websites that look very much like the many “magazine” style premium themes out there. Designers will also sometimes incorporate sliders and other design pieces that are in themselves not custom.

Ever hear the saying “Go big or go home!”? Well, if you live by that saying, you may reconsider using half of your limited startup budget on custom design now when you can spend all of your second round of investment on a website that is already established and looks hot. Ultimately, how you utilize your startup budget depends on your own goals and premonitions.

Examples of Some Outrageously Awesome Premium Themes

Prestige – The Prestige theme has to be the premium theme I am most impressed by. It comes in dark and white versions with an enormous amount of other design schemes, shortcodes (these are built in options to enhance individual webpages), and plugins, all built in. Though this theme is substantially more complicated to configure initially, it is very impressive. The same theme custom built would no doubt cost you a ton of money.

Avisio – This is the theme the website for Holistic Web Media uses. We use a premium theme to absolutely minimize the amount of design work we have to do. This way, we can spend more time on our clients. The Avisio theme is made by Kriesi, a rock star designer from Austria. I highly recommend his work.

Striking – The theme used for Life Tech Law. This theme is great for law firms, medical practices, and other such business. The color schemes are completely customizable and it comes with some awesome shortcodes.

The Restaurant – Indeed, a theme specifically for promoting your restaurant.

GeoPlaces – This theme is used specifically for creating city directory websites. The Google Maps functionality on the front page exemplifies the unique and raw power that some premium themes come with.

Realtor Press – An extraordinary theme to create real estate websites. This theme, although a bit pricey, comes with incredible functionality.

How We Do Design

Holistic Web Media does custom design when it is requested, and assist clients in finding premium themes to use when that is the route they take. Our custom designs are based on the Zen framework (for Drupal) or the the Thesis framework (for WordPress). View our portfolio for examples of all of our websites, and view our web design services page for examples of custom design work we have done. The case studies in our portfolio describe whether a website utilizes a premium theme or a completely custom design.

Don’t Hack Core image credit goes to Greg Dunlap (heyrocker).

WordPress has recently allowed the creation of custom content types that can have their own associated custom fields and custom taxonomies. These content types and taxonomies can be declared in the functions.php file. Web Developers familiar with Drupal understand how limited WordPress can be when it comes to creating websites that rely on a variety of different content types.

Drupal’s popularity has come from its ability to easily create and list out custom content types. The Drupal module Content Construction Kit (CCK) allows you to easily create content types with various fields, while another module, Views, allows you how to configure how these content types are listed on a page. Both of these modules are now included as part of the core of Drupal 7.

Drupal CCK - Managing Custom Content Type Fields

Plugins such as WPMU Dev’s premium CustomPress plugin provides a user interface that allows one to configure these WordPress content types and taxonomies without needing to manually create theme with PHP code in the functions.php file. WordPress’s template hierarchy allows you to take control of how your posts are listed with PHP code, but nothing to the extent to that of Drupal’s Views, which provides an expansive graphical user interface (GUI) to make this task more accessible.

Drupal Views GUI

Drupal Views will list content based on certain criteria that can be defined in its GUI. In WordPress, you’ll need to programmatically define how your content is queried and displayed using PHP. You’ll notice in the above screenshot, that the Drupal Views GUI allows you to input content for the header and footer of the view, allowing you to add snippets of content before and after the area on the page where the content types are listed out. Unfortunately, WordPress doesn’t allow the content editors to easily edit content displayed before or after the WordPress query output in the template.

This tutorial / case study describes how to emulate this specific aspect of Drupal Views functionality to some extent. Ultimately, it might be advisable to use Drupal instead of WordPress in a situation which calls for a variety of content types, but several reasons (such as a client’s strong wishes) might force you to think outside the box and force WordPress to the limits of its CMS functionality.

Case Study: Building a Website for Adventure Camps

Assume, for example, that a website is being built to promote different event types: Summer Camps, Overnight Camps, and Family Trips. Each will share a set of taxonomies: location, age groups, and activities. Each will have custom fields. You create single-summer_camp.php to control how a single summer camp content is displayed, and type-summer_camp.php to control how a list of summer camps is output at the hypothetical URL http://www.example.com/summer_camp. You create taxonomy-location.php to control how a list of camps that share a location are output.

Assume age groups are 5-8, 9-11, 12-15, etc. The locations of these camps are in different Oregon cities, Medford, Grants Pass, Ashland, Salem, Corvallis, Eugene, Jacksonville, and Portland. Activities are kayaking, mountain biking, rock climbing, etc.

The content editors (who, keep in mind, might very well be WordPress novices) may have no problem adding and listing content on these pages. When they create a Summer Camp, they associate it with the proper taxonomies (e.g. age group 5-8 and 9-11, location Grants Pass, and activities kayaking and hiking), and your programming takes care of the rest. However, they also want to add unique promotional snippets to the top and bottom of the templates, including unique snippets for each location listing.

Tip: when communicating to clients and editors, it may be helpful to refer to these pages as directories, as the term templates may get lost in translation.

Problem: How Does One Add Content to a WordPress Template Without Modifying the Code?

WordPress will utilize what is called The Loop to query and output your posts in your template. By modifying the PHP in the appropriate template, you can output certain taxonomies and custom fields for a queried post or content type, but WordPress does not provide an interface in the Dashboard to edit text that is output before and after the queried output, other than the file editor located in the Editor section (listed under Appearance).

In Drupal, you could train the editors to modify the header and footer section of the appropriate View. Although Drupal’s administration section is less rich and more difficult to use than WordPress, at least this is possible out of the box.

Solution: Using Snippets to Include Content at the Top and Bottom of WordPress Templates

It is possible to query and output the content of a single post or custom content type. Therefore, we can simply create a new custom content type called Snippet and output them directly from the template themselves. Create the snippets you’ll need and name them accordingly. For example, you can create one for the top of the Summer Camps directory page called Summer Camps Directory Top Snippet.

Identify the ID number of the snippet you’ll want to use. The following code uses a snippet’s ID number to output it. Simply utilize the following code, replacing the ID number with the correct one. You can identify the ID number in the edit link’s URL for the snippet.

[php]
$post_id = 2257;
$queried_post = get_post($post_id);
echo “<p>”. $queried_post->post_content . “</p>”;
[/php]

What About Unique Snippets for Different Individual Taxonomy Terms?

The code above will work fine for injecting header and footer text into directory pages such as type-summer_camp.php. However, the taxonomy-location.php file will require different snippets based on what taxonomy term is being used in the query. That is, a different snippet will be used for all Medford camps than one used for all Eugene camps.

Assume that because the website’s navigation system is utilizing the taxonomy terms’ slugs (the text used to compose the URL that is defined in the individual taxonomy term’s settings). The slugs for these taxonomy terms are not likely to change, so we will use them in our code. First we will find the slug of the taxonomy term currently being used, then use it in a switch (you can also use if statments) statement to output the correct snippet.

Finding the Slug of the Custom Taxonomy Term

The following code can be used to store the current slug in a variable called $the_slug:

[php]
global $wp_query;
$tag = $wp_query->get_queried_object();

$the_slug = $tag->slug;
[/php]

Using the Slug to Output the Correct Snippet

The following code will use $the_slug to output the appropriate snippet:

[php]
switch ($the_slug) {

case ‘ashland’:
echo “<h2>Upcoming Ashland Day Camps</h2>”;
$post_id = 2807;
$queried_post = get_post($post_id);
$title = $queried_post->post_title;
echo “<p>”. $queried_post->post_content . “</p>”;
break;

case ‘medford’:
echo “<h2>Upcoming Medford Day Camps</h2>”;
$post_id = 2148;
$queried_post = get_post($post_id);
$title = $queried_post->post_title;
echo “<p>”. $queried_post->post_content . “</p>”;
break;

case ‘eugene’:
echo “<h2>Upcoming Eugene Camps</h2>”;
$post_id = 2812;
$queried_post = get_post($post_id);
$title = $queried_post->post_title;
echo “<p>”. $queried_post->post_content . “</p>”;
break;

case ‘portland’:
echo “<h2>Upcoming Portland Day Camps</h2>”;
$post_id = 2809;
$queried_post = get_post($post_id);
$title = $queried_post->post_title;
echo “<p>”. $queried_post->post_content . “</p>”;
break;

default:
echo “<p>No snippet defined for this location, or slug is misdefined. Please contact the webmaster.</p>”;
}
[/php]

Ensuring Proper Formatting

If you notice that the output of your snippets are not being formatted correctly, it may be because of the way the TinyMCE editor in WordPress manipulates the content input through the visual editor. The TinyMCE Advanced WordPress plugin is useful for this manner. I’ve mentioned this plugin in other posts, Creating a Quotes Page in WordPress, and Spicing Up Your WordPress Content. It is a great utility, as this plugin has a plethora of uses.

This plugin, when installed, provides additional functionality to the editor’s toolbar, but also has options to prevent the editor from doing certain things that can oftentimes be annoying as all get up! In particular, by default, the WordPress editor strips <p> and <br> tags when saving, and this can cause your snippets to be output without line breaks. The setting to change is shown in the screenshot below.

TinyMCE Advanced Options

Benefits and Drawbacks of this Method

This method will allow content editors to edit the content of the header and footers of various templates easily. Instead of requiring constant begging of the webmaster, content editors will feel right at home editing these snippets using the WordPress TinyMCE editor.

However, this method does have certain drawbacks:

• Because of the theme hacks involved, a higher maintenance cost will be incurred when the theme needs to be upgraded. Daily WordPress backups are critical. If another developer or webmaster decides to take it upon him/herself to update the theme to a newer version, he/she may inadvertently override your code. Backup your work, and make sure that your client knows that this kind of development will require eventual maintenance.
• Because the snippets are hardcoded into the templates by their ID, they should not be deleted. If a snippet is accidentally deleted, it will need to be recreated, and will have a different ID number. The appropriate template will need to be updated. Make sure that your client understands that this will require a necessary albeit easy fix.
• As mentioned above, once implemented, the slugs used in the switch or if statements cannot change. Ensure that your client knows that expansion of site functionality in this regard will require an expansion of the code.

Of course, this post may end up becoming outdated as WordPress improves and moves closer to being a full-fledged, flexible CMS. WordPress does indeed have the potential to really give Drupal a run for its money, but at this point, us developers still require these type of hacks. Hopefully, when WordPress does reach this point, updating the system won’t require nightmarish migration due to core or database changes.

Until then, please feel free to comment on improved methods or any mistakes or misconceptions I’ve made in this post. Happy programming.

I’ve put some of my college essays on Gorgalore.com as blog posts. These essays had many references, so I needed to recreate a works cited page at the bottom of the WordPress posts. There are several WordPress plugins which allow you to add references to your posts. This website is currently using the Simple Footnotes WordPress plugin. This plugin is extremely simple to use.

To create a reference, simply use the [ref] shortcode, such as in the following example:

This is a sentence with a citation![ref]

OSU Beavers fan blog. And this citation can be written however you’d like, and even include an image! November 13, 2010.[/ref]

The references will be listed at the bottom of the page. The reference links back to the referenced text, and vice versa. You can even place images in your references. There are other footnote/citation/reference plugins for your WordPress posts, including some, such as the Footnotes for WordPress plugin, which will open up a pop-up note with the reference and allow you to move where the references are output.

Using Pull Quotes to Emphasize Something in a WordPress Post

This is a sentence I’d like to emphasize with a pull-quote.

Note that some themes have shortcodes built in that may use the pullquote term, and that some themes already include styling for pull quotes.

Adding a Clean Line Break After Aligned Images

You’ll notice that there is difficulty involved in creating clean line breaks after placing images and aligning them next to text that is shorter than the image. For example, you may get into a situation such where your images are aligned as so:

Example – The Transformation of Benny:

Old OSU Benny Beaver

The previous Benny Beaver made its last appearance at the 2005 Insight Bowl but scared too many little kids with his angry eyebrows and big teeth.

New OSU Benny Beaver

The new Benny Beaver is a bit more jovial and scares less children. He also apparently has a part time job working the concession stands.

Now, there has been some frustration vented by others concerning this, as shown in this forum discussion. It may seem like a pain, but you’ll need to leave the TinyMCE editor and access the HTML code by clicking on the tab above the editor, and use either <br clear="none" /> or <br clear="all" />.

Example – The Transformation of Benny:

Old OSU Benny Beaver

The previous Benny Beaver made its last appearance at the 2005 Insight Bowl but scared too many little kids with his angry eyebrows and big teeth.

New OSU Benny Beaver

The new Benny Beaver is a bit more jovial and scares less children. He also apparently has a part time job working the concession stands.

I had to use this method in my post Creating a Quotes Page in WordPress. Unfortunately, WordPress strips this out when you return to the visual TinyMCE editor from the HTML editor, making this tactic a real headache. If you must, you can compare the revisions of the WordPress theme to access the raw HTML of a former post, and edit from that.

Loading Linked Images Within WordPress in a Modal Window

With nearly every WordPress website I build, I install either the Lightbox 2 plugin or the Easy Fancybox plugin. These plugins very simply load a linked image in a modal window, which is a window that floats above the current one, rather than in an entirely new window. For example, click this link to an image of the Oregon Civil War. Note that the caption in the Fancybox window is the title property of the anchor tag. I have experienced problems with the Lightbox2 plugin causing incompatibilities with WordPress themes and other plugins, and thus have had to opt for the Fancybox plugin instead. Keep in mind that some themes may have built in modal window functionality.

Adding Options to Your Editor

The TinyMCE Advanced plugin will add a slew of additional options for the post editor that is built into WordPress. You can add a dropdown box to allow for changing the font or styles of selected text, and you can add buttons to insert a no-break space, current time and date, and more. You can also, for example, use the advanced editor to more easily create quotes in a WordPress post.

TinyMCE Editor without the TinyMCE Advanced plugin installed.

After installation, additional options can added to the TinyMCE editor menu.

For Developers – Nicely Style Your Code

You may have seen posts that display computer code (such as HTML or PHP) in a very nice, unique manner. There are a variety of plugins available to create such an effect; this website uses a plugin named Syntax Highlighter for WordPress. Below is an example of using the shortcodes provided by this plugin to beautifully display some PHP code:
[php]
Echo "Hello, World!";
?>
[/php]
You can see more utilization of this plugin in this post on modifying WordPress templates.

Featured image source: WordPress Wallpaper on Wood by fran6 (www.fran6art.com).

Please note: this guide describes a full manual WordPress site migration. If your hosting provider allows it, using the plugin Automatic WordPress Backup will allow you to migrate a site while making a backup on Amazon’s S3 cloud.

Moving a website built on a content management system (CMS) like Drupal 6 can be as simple as moving the files themselves. The Drupal configuration file, which has the database information, does not need to be changed.

WordPress, however, actually stores the WordPress address (URL) and site address within its associated database.

Why Does WordPress Store the Website URL in the Database?

There is a closed forum topic on this question: Discussion: Why does WordPress store the TLD/absolute URL in the database?

One poster in that forum topic gave a possible explanation: “I suspect that it’s that way for historical reasons, meaning no one felt the need to change it.” However, it can be quite a nuisance, and it is surprising that even in WordPress version 3.0.4 (the newest version at the time of this post’s composition) this menial flaw still exists. Another poster explained, “So far it works, but is an order of magnitude more complicated than your average blogger would like.” To make matters worse, images are not stored in posts based on their relative URLs, meaning that on a freshly migrated WordPress site, all images and many manually created links are suddenly broken. Thankfully, you don’t have to spend a great deal of repetitive work manually fixing these thanks to WordPress plugins such as Search and Replace.

Manual WordPress Migration

These instructions assume you are using a standard web hosting provider like FatCow or GoDaddy and have access to your databases through phpMyAdmin.

The most likely reason for migrating a WordPress site is that it is being developed in a test sub-domain or sub-directory and is now ready to be launched. The safest approach to this migration is to duplicate the website from the original site URL (e.g. http://test.example.com) to its final URL (e.g. http://www.example.com). In doing so, you can easily create a backup of the entire site and store it on a different server in case your files or database get corrupted in the near future.

Steps to Manual WordPress Migration

1. Backup the Website’s Files
2. Export and Back Up the Website’s Database
3. Modify New DNS Records (if Switching Hosting Providers)
4. Ensure the Domain Points to the Correct Folder
5. Copy the Backed Up Files to the New Location
6. Import the Website’s Database MySQL Dump into a Newly Created Database
7. Manually Change the WordPress URL

1. Back up the Website’s Files

Copy the directory holding your files to a brand new directory on your server. It is always suggested to create a full website backup when making large changes to it. Because migrating the website is a major change, it is a great time to make a full backup. If your website is being launched into a production website (i.e. a live, public site) after completing its development, then this is also the most devastating point in time for something terrible to go wrong since it most likely involves a client’s deadline. In my experience, I’ve seen PHP files on a web server get hacked and modified, and have also seen situations in which the wrong folder was deleted.

If you really want to create some insurance for your production site, you should automatically backup your WordPress site on the Amazon S3 cloud. More on this in a future blog post.

The lengthiest task involved in site migration involves moving the files. Transferring many small files can be tedious with FTP. You may find that your concurrent FTP connections are limited, which will slow you down. If you don’t have the time, you can simply change the folder to which your primary domain (see the next step) is pointing and make some slight modifications to the database. However, backing up the files during migration (and on a regular basis) is not a task to ignore.

2. Export and Back Up the Website’s Database

You are most likely storing your website using a simple MySQL database. In the control panel provided by your hosting provider, there should be an option to access your databases through an open source database interface called phpMyAdmin. For example, in the Hosting Dashboard in GoDaddy access the Databases section and click on the MySQL button. In FatCow, click on the Access MySQL button in the Scripting and Add-ons section of the Control Panel.

Access phpMyAdmin in GoDaddy

Log in to phpMyAdmin. If you are having trouble figuring the name, username, or password for the database, remember that WordPress stores this information in the wp-config.php file in the WordPress root.

In phpMyAdmin, access the correct database and click on the Export tab. Be sure to check the boxes as shown in the screenshot below. Remember to check Select All to make sure that you dumb the entire database.

Complete INSERTs improve the readability of the SQL dump. Extended INSERTs will combine queries and reduce file size. Neither are necessary, though if you are having issues with file size, checking the Extended INSERTs box may help. For more information about this, read Complete inserts or Extended inserts in phpMyAdmin. You can also read Backing Up Your Database in the WordPress Codex for more information.

Clicking Go will prompt you to save a file. This file is known as a SQL file dump. Essentially it’s a file that has SQL INSERT commands used to recreate the database.

Backing up your database is not absolutely necessary, but neither is saving your Word Document you’ve been composing an essay on for five hours that’s due in the morning. It’s one of those situations where laziness can cause you an enormous amount of awful work in the longrun. You should back up your database on a regular basis. There are WordPress plugins that back-up your site automatically, but I’ve used one of these plugins once with the end result being a blown up database. Because I had backed up my database manually, I didn’t have to worry. Your hosting provider might also provide a section in your control panel that allows you to manage scheduled database backups.

3. Modify New DNS Records (if Switching Hosting Providers)

If you are switching hosting providers, you’ll need to modify the DNS NS (name server) record. But first, you can set up a temporary site on your new hosting provider that allows you to fully test your site before making the final switch. Follow steps 4-6 below for this process. Keep in mind that WordPress is dependent on the URL stored in its database, so you may have to manually change the URL of the site twice, once for the temp domain, and again to the final URL.

For most hosting providers, you simply access the Domain Management section in your control panel of the new host and add the domain name to be added. Then, access the control panel of the old host and update the NS records. This should be available in a section labeled DNS Settings and sometimes (such as in Media Temple) labeled as a DNS Zone File. Your new hosting provider should easily provide you with the proper records. FatCow’s name servers are ns1.fatcow.com and ns2.fatcow.com and Media Temple’s are ns1.mediatemple.net and ns2.mediatemple.net. Your hosting provider’s technical support should be able to assist you with this further if you have problems.

A note on email – It is possible to host email at a different hosting provider than the one where you host your website. The mail exchange server is assigned in the DNS  through the MX records. It is imperative that you check these records before and after you modify other DNS records and do not change the MX records unnecessarily or you may experience an email service disruption. Changing email exchange servers can also cause stored emails to be lost. It is for this reason that you should always have mail forwarding set up to a more permanent location like a GMail account.

4. Ensure the Domain Points to the Correct Folder

At this point, ensure that the new domain or subdomain is pointing to the current folder on your web-server.

Your hosting provider will most certainly allow you to host more than one domain name on your hosting space. All files for all your hosted websites will be stored in the same folder on the server, meaning you only one FTP account to access the files for all your websites.

Your web hosting provider will have a domain pointing manager. This is an area in your web hosting provider’s administration panel that allows you to define what folders are used as the root for different domain names. For example, from the root, one folder named example1/ can be assigned for for http://example1.com and example2/ for http://example2.com.

Click on the following for information about changing domain pointers within specific web hosting providers:

The domain and subdomain pointing managers are clearly visible in the administration sections of companies like FatCow such as vDeck. Simply click on the Domain Pointing Manager icon (or Subdomain Pointing Manager to assign subdomain pointers).

Domain Pointing Managers in FatCow Dashboard

A list of your hosted domains and their current domain pointers will be available for you to modify. Changing these settings does not affect files on the server. If you delete a pointer, your files will be safe.

FatCow Domain Pointers and settings

Note that you can also specify the domain to use a parked webpage that FatCow will provide or you can assign a URL redirect. Assigning a URL redirect will prompt you to specify a standard or stealth redirect. The standard redirect simply redirects the site to the assigned URL while the stealth redirect will load the other website in a frame. This is not recommended, as it is very bad for your website’s SEO.

The additional instructional text shown in the screenshot above describes the nameservers necessary for using FatCow hosting on a domain hosted elsewhere. This post does not touch on this process.

[UPDATE]: FatCow has since merged Domain Pointer settings into Domain Central. Click on the Domain Central to bring up a list of domain names and associated pointers.

To access the same functionality in GoDaddy, however, you must traverse the horrific GoDaddy usability. There is a section called Domain Management. See the screenshot below.

Domain Management in GoDaddy Control Panel

Clicking on the link that says Domain Management will take you to the Domain Management section. In the this section, click on the “D” symbol next to the domain. This will take you to the Control Panel for your account. You can actually access this by clicking on the Hosting link instead of the Domain Management link in the screenshot above. Note: this demonstrates GoDaddy’s poor usability of its back-end controls, but its true drawback is the way it charges for so many additional products that normally come free with other hosting accounts.

Access GoDaddy Hosting Dashboard

From the main Dashboard screen, click on Hosting in the products section (it will read “Web Site Options”). In the section you’ll enter, titled Hosting Dashboard, click on the large button that reads Domains.

Access Domain Manager from GoDaddy Hosting Dashboard

Finally, you’ve accessed the Domain Management section where you can assign and modify subdomains and point domains to the proper folders.

GoDaddy Domain Pointing Management

You can create and upload a test html file to the new folder to make sure that the domain is pointing correctly.

5. Copy the Backed Up Files to the New Location

Copy the files into the appropriate directory used by WordPress. You will need to modify the wp-config.php file in the root WordPress folder with the appropriate settings for your new site.

6. Import the Website’s Database MySQL Dump into a Newly Created Database

In phpMyAdmin, create a new MySQL database. Do not create any tables in this new database. Click on the Import tab. Select the SQL dump file that was saved when you exported. Click Go. Ensure that the new database has the same number of tables as the old one.

Import WordPress Database in phpMyAdmin

7. Manually Change the URL

The site URL and homepage URL are stored in the database and accessible in the WordPress General Settings. On a normal install, they are the same. There are several ways to change the site URL, and these are explained in Changing The Site URL in the WordPress Codex.

You will also then want to verify that the correct path exists for the uploads folder in the WordPress Media Settings. Otherwise, your images will be uploaded to a non-default path and this may cause a headache later.

Sometimes, items in your WordPress content, plugins, or themes do not rely on the WordPress URL setting and instead are set manually. Some themes or sliders, for example, store absolute paths and may need to be modified when the site URL is changed. In worst case scenarios, these URLs are encoded as HTML and may end up needing to be changed manually anyways.

Another staple plugin that can be used for this purpose is Search and Replace. Use this plugin to change the path from example1.com to example2.com.

Quicker Migration

As stated earlier, this is a purely manual migration. Other plugins and scripts can be used to automate this process. At times, this migration can be a lengthy process, especially when dealing with slow FTP transfers and host limitations.

If you would like to help improve this guide, please leave me a comment.

• The Golf Channel Quotes of the Week
• POLITICO’s Politi-quotes of the Week
• Quotes of the Week on the BBC’s Chris Charles’ Sports Blog
• Gone Hollywood’s Top Ten Celebrity Quotes of the Week

I decided to keep things simple and create a quotes page using what WordPress already has to offer. Using this method I created the following quote pages:

• Health Policy Solutions: Recent Quotes on Childhood Obesity, Sports Injuries, and Health Care Reform
• Gorgalore.com: Quotes about Niccolo Machiavelli’s The Prince.

WordPress and the TinyMCE WYSYWIG (What You See is What You Get) editor allows you to make a list of quotes that looks attractive and can contain a thumbnail image of the quoter as well as links or additional information.

First, prepare by installing just one extra WordPress plugin:

1. Install the TinyMCE Advanced WordPress plugin. This plugin will enhance the WYSYWIG TinyMCE WordPress editor and add a button to format text as a blockquote.
2. In the WordPress settings you can access the TinyMCE Advanced settings, where you’ll want to drag and drop the quote button onto one of the WYSYWIG toolbars.

Once the blockquote button appears the TinyMCE editor, you can create your first quote:

1. Add the text for your quote:

“It’s not like I idolize this one guy Machiavelli. I idolize that type of thinking where you do what ever’s gonna make you achieve your goal.”

2. Add the author of the quote in bold on the next line:

“It’s not like I idolize this one guy Machiavelli. I idolize that type of thinking where you do what ever’s gonna make you achieve your goal.”
2Pac Shakur

3. Place your cursor at the start of the quote and insert the picture you’d like to use. Make sure that the image is aligned left.

“It’s not like I idolize this one guy Machiavelli. I idolize that type of thinking where you do what ever’s gonna make you achieve your goal.”
2Pac Shakur

4. Add links or extra information after the quote as needed.

“It’s not like I idolize this one guy Machiavelli. I idolize that type of thinking where you do what ever’s gonna make you achieve your goal.”
2Pac Shakur

Tupac Shakur read Niccolo Machiavelli’s The Prince and admired its author’s philosophy. Read an essay on Machiavellian Business.

5. Select the image and entire block of text. In the TinyMCE toolbar, click on the blockquote button. This will, depending on the theme you are using, add additional styling. The theme on this website adds a large quotation mark on the left side of the quote and changes the font styling.

“It’s not like I idolize this one guy Machiavelli. I idolize that type of thinking where you do what ever’s gonna make you achieve your goal.”
2Pac Shakur

Tupac Shakur read Niccolo Machiavelli’s The Prince and admired its author’s philosophy. Read an essay on Machiavellian Business.

6. Resize the image using the built in WordPress image options. Click on the image and click the edit button and resize as necessary. Click on thumbnail to enlarge screenshot.

“It’s not like I idolize this one guy Machiavelli. I idolize that type of thinking where you do what ever’s gonna make you achieve your goal.” 2Pac Shakur

Tupac Shakur read Niccolo Machiavelli’s The Prince and admired its author’s philosophy. Read an essay on Machiavellian Business.

7.0 Depending on the CSS used by the WordPress, you may wish to resize some of the text that is automatically formatted in a certain way by the blockquote. The Advanced TinyMCE plugin adds a dropdown to the WYSIWYG editor that allows you to change the text. In this example, I changed the size of the note underneath the quote and added a line break before it in the HTML.

“It’s not like I idolize this one guy Machiavelli. I idolize that type of thinking where you do what ever’s gonna make you achieve your goal.” 2Pac Shakur
 

Tupac Shakur read Niccolo Machiavelli’s The Prince and admired its author’s philosophy. Read an essay on Machiavellian Business.

8.0 You’ll notice that clicking on the images of Tupac opens a larger image (the original) in a lightbox, also known as a modal window. This functionality may be built into the WordPress theme you are using but can also be done using the WordPress Lightbox2 plugin or any other plugin that creates a similar effect. This plugin loads any linked image in a lightbox. If you have time and want to spice things up even further, install and activate this plugin, and link the quote’s image to an alternative image. You’ll notice that the image in the quote above is linked as such. Try clicking on it to see this in action.

9.0 Once you have created this quote, you can duplicate it multiple times and modify each one to create a list of quotes.