This article was written for ThinkDoBeCreate by Christopher Shepard of WebHost Gear, a site that provides hosting information and

So you’ve done everything you can think of to launch your website, and share it with the entire World Wide Web. You registered a domain name. You paid for web site hosting with the hosting provider of your choice. You uploaded the contents of your website to your web server. You’ve done all this, yet you still can’t see the results of all your hard work! When you ask around you’re told that it has to do with something called “DNS propagation”. What the heck is “DNS propagation” and what does it have to do with not being able to see your web site?

To understand what DNS propagation is, you first need to understand how DNS works. DNS stands for “Domain Name System”. When you first set up a web site with a web host, they create what is called a “Master DNS Record” within their DNS servers. Your domain name registrar—the company that paid to register ownership of your domain name—then indicates your web host’s DNS server as the master authority of your domain name.

No matter where you host your website, the network your site is on has its own DNS server. In fact, it is standard for most web hosts to have two or more DNS servers. These servers then act as the authority for your domain; your Internet service provider makes a couple of entries in their DNS server: one is for your domain name that basically says: “YOU ARE HERE!” Technically, this is called an “A” record—“A” stands for “address”. The other entry is called the Mail Exchanger (MX) record, which designates a mail server that will receive emails for your chosen domain name.

There are hundreds of thousands of DNS servers located worldwide. Each DNS server is sort of like an address book for the Internet. They have information about your domain name, which acts as your address for the Web. Remember though that no single DNS server has all of the domain names for the entire Internet. They only have the names they are responsible for. Some DNS servers do nothing but store domain names. Other DNS servers provide “look up” services for computers to look up domain names. Still other DNS servers do both jobs.

There are a few bits of important information kept on a DNS server about your domain name. All of this information taken together as a whole is called the “DNS Record”. In the DNS Record, computers can find other bits of information, also called records, regarding your domain name. For DNS propagation, the only part we need to understand is the part that stores the ‘A’ record.

When an visitor types in a domain name, the computer then accesses the registration database to ask about the DNS authority for your web site (the DNS servers of your site assigned by your web host). Then they visit these DNS servers for the IP Address for your domain name (it’s sort of like the street address for a building, also assigned by the web hosting provider), retrieves all the information from that IP address, and delivers it to the visitor in the form of the web site.

The problem with this set up, though, is that to speed up the rate at which a customer can view the World Wide Web, every Internet Server Provider (ISP) will cache their DNS records. What that means is that an ISP makes their own copy of the master domain records, and will read from those locally saved copies, instead of looking them up over Internet every time someone wants to look at a website. This actually makes web surfing faster by speeding up the time it takes for your web browser to look up a domain name and get the record, and reduces the amount of overall traffic on the web, thereby giving the web the ability to load faster.

The drawback to this caching method, and why it can take so long for a website to be viewable to everyone, is that each ISP that caches its DNS records only updates those records every couple of days. The time between updates isn’t set to any particular standard. Each individual ISP can set the update time to be anywhere from a few days to a few hours. This slow update of the cached records is called propagation. It’s so named because after you register your web site, the web site’s DNS information is then propagated across every DNS server on the Internet. When this process is finally complete, everyone is able to visit and see your new web site. Since the cache time is different for every DNS server, DNS changes can take from 36 to up to 72 hours to be totally updated.

So the next time you set up a new website and you don’t see it right away after you upload everything, or you’re not receiving emails sent to the email addresses tied to your website, don’t panic—your website wasn’t killed on sight and neither is your mail server. The information is just currently being sent, copied, and cached to every possible DNS server in the world, and the world is big. Wait up to three or four days—it usually doesn’t take longer than that. Push website launch dates back a couple of days, in order to give time for DNS propagation to complete.

Korinne Zimmerman, aka “Crafterella” on twitter and Etsy, won. She is in the process of opening a new Etsy shop called Crafterella Cupcake, and so requested the use of the delicious pastry in pink and green and Kawaii-style. After approving the biz card design, she then requested ThinkDoBeCreate’s services to also create a banner and avatar for her Etsy shop. The following are the results of this project.

BONUS: Screencast tutorial of creating cute vector cupcakes after the images.

PRISMATIC is a new website for University of Nebraska-Lincoln Advertising Majors. I started on this project almost two years ago. Initially, it was myself and my supervising professor, Stacy James, who picked me out of her class to help with this special project. The first stage of the project was the previous entry, the advertising uncommons.

The second stage involved creating a team to help carry out the objectives I had created for the site. Over the past year we have been working on a visual identity. PRISMATIC was a name I initially chose because advertising is such a colorful business, literally and figuratively. Additionally, the UNL Ad Major is to students as a prism is to light: they enter as one but leave with the skills and knowledge to accomplish many things.

For this, the official logo of the PRISMATIC mission, the prism graphic was originally created by fellow team member Abigail Powers. Typography, graphic placement, and color scheme were my responsibility.

I am also the interactive designer for our website, now in it’s third phase. You can check on the progress of this project at unl-ad.me

The advertising uncommons received a 2009 Nebraska Silver Student ADDY.

This post assumes that you are already a web designer
and know basic HTML and CSS.

In This Post:

• Links to free Wordpress themes
• Installing a theme
• How to create a custom index page
• The Wordpress loop
• Using Custom Fields
• Create unique page and category templates
• How to add social sharing icons and links
• Recommended plugins for contact forms, multiple thumbnails, & tables
• Resources for other Wordpress tips & tricks

Getting Started

1. Grab a domain and hosting. I recommend this* web hosting (their name is actually “this*”).
2. Download the latest release of Wordpress and upload it to your hosting server.
   Note: If your host uses cpanel, you probably have access to Fantastico or Simple Scripts which allows you to easily install Wordpress. Check for this first because it will be much faster to install this way.

Free Wordpress Themes

I highly recommend finding a free theme that is similar in layout to your ideal design. That way you don’t have to completely learn how to code a Wordpress site, but rather modify the design to your liking. If nothing else, viewing the free theme galleries may inspire you to consider a theme function that you hadn’t thought about before.

The two themes I combined for my site were:

• Satorii - the main base structure for my site
• OmegaX 1.0.3 – the base structure for footer sidebar and copyright area

The mother of all design resources, Smashing Magazine, has compiled several lists of free and amazing Wordpress themes. Some of them are:

• 100 Amazing Free Wordpress Themes for 2009
• 100 Excellent Free WordPress Themes
• 40 Free High-Quality WordPress Themes
• 83 Beautiful Wordpress Themes You (Probably) Haven’t Seen
• 30 Free High Quality Wordpress Themes

Installing a Theme

To install your chosen theme, upload the ENTIRE theme folder to this path on your web server: wp-content/themes

Create a Custom Index Page

Especially if you are using Wordpress for a website where blogging is a secondary function, you should customize the index page.

You can design and create a plain HTML and CSS document just as you would for any other website. However, once that is done, you will need to break it up into the header, main index, and footer php files.

Nick La at Web Designer Wall has a great article showing how this is done. Find it here.

If you have not set up a testing server, such as Mr. La describes in this post, you will be editing those pieces from the Editor on your online Wordpress home. This is done by going to Appearance>Editor, and then clicking on the files and copying/pasting the parts you want to replace. Be careful not to delete the <php> scripts!

Correct Image Linking

If you are doing your editing online, then the images you have included in your header/index/footer files will need to have their file paths updated. Here’s how:

• Upload your “images” folder into the main theme folder.
• For each image used, correct the file path as follows:

  <img src="<?php bloginfo('template_directory')?>/images/logo.png" />

• If this is not working, double-check that you have the backslash after the php code – “/images”

The Wordpress Loop

The Wordpress Loop is the essence of Wordpress blogs. It is the php script set that actually displays the posts. The HTML and PHP designated within the loop will be used for each post. To really understand the loop, here is the documentation page on the Wordpress Codex.

There can be multiple loops per page. This is necessary when you want to retrieve different types of posts or post information.

<?php if (have_posts()) : ?>
     <?php while (have_posts()) : the_post(); ?>
               <!-- do stuff ... -->
               <?php endwhile; ?>
<?php endif; ?>

The “do stuff” area is where you place any HTML or PHP you want to be shown for each post.

You can limit the query of the posts to a specific category or custom field name, as explained next.

Custom Fields

Custom fields allow even greater, well, customization of each post. You can add things like thumbnails, meta data, or even CSS stylesheets. These are designated when you write a new post and only apply to that post.

ThinkDoBeCreate uses custom fields on the home page to pull the latest blog post and link to the client spotlight. The benefit of using custom fields is that these areas are updated immediately without having to manually edit those links every time I have a new post.

This post from Perishable Press was a great help when I set out to learn about custom fields.

The custom fields have to be used inside the loop. I will show you the code for my blog link on the home, then we’ll break it down.

<div id="blog">
<?php query_posts('showposts=1&cat=4'); ?>
<?php if (have_posts()) : ?> <?php while (have_posts()) : the_post(); ?>
<a href="<?php the_permalink() ?>"><img src="<?php echo get_post_meta($post->ID, 'blog', true); ?>" alt="<?php the_title(); ?>" /></a>
<?php endwhile; endif; ?>
</div>

• The <div> is of course just the designated area where this post should show up.
• The second line,

  <?php query_posts('showposts=1&cat=4'); ?>

  means to limit the loop’s display of posts to showing one post in category 4

• The third line begins the basic loop.
• The fourth line is where we bring in our custom field. In this instance, I am using the custom field designation to pull a thumbnail. I want this thumbnail to be linked the corresponding post. So,

  <a href="<?php the_permalink() ?>">

  provides the link to the appropriate post. Then, for the img src,

  <img src="<?php echo get_post_meta($post->ID, 'blog', true); ?>"

  means that it should come from the custom field ‘blog’.

• The fifth and sixth line close the loop and the div.

Designate Custom Field Within A Post

When you are writing a new post, the area “Custom Fields” below the writing WYSIWYG area is where you need to go. For the example above, you would type “blog” for the name, and put the URL of the uploaded image file for the value.

Done!

Create Unique Page & Category Templates

Now that you understand creating a custom index page, and how to use the loop, you may want to present more customized page and category templates.

Page Templates

These are useful for applying unique CSS to specific pages, or to display distinct features such as a slideshow.

First, you need to copy the theme file “page.php” and rename it to your desired template name, such as “portfolio.php”. At the very top of your new file, put the following code:

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

You can then modify other areas inside the loop to make this page unique. To use this template for your page, you will have the option to select it when you add a new page. This are appears to the right of the WYSIWYG writing area in a drop-down menu.

Category Templates

My theme makes heavy use of category templates. There is one for my blog posts, one for clients, and one for my overall portfolio. Within the portfolio category is a breakdown into identity, illustration, interactive, and print.

While categories will display on a unique page by default, you may want to futher customize how posts in a specific category appear. For instance, I do not want the date published with my portfolio pieces, but I do want it on my blog posts. I also added the custom field of “Client” to my portfolio pieces, but obviously don’t want it on my blog posts.

1. First, find the category number. To do this, go to Posts>Categories, and then hover your cursor over the name of the category you want to work with. The category number will be displayed at the end of the URL which will display in your browser’s status bar at the bottom of the window.
2. Then, resave the file category.php as “category-3.php” where “3″ corresponds to the category page you are customizing. Just saving it this way automatically tells Wordpress to use this template when the category 3 page is viewed without you having to designate it anywhere else.
3. Now you can edit the category-3.php page any way you like.

Add Social Sharing Icons/Links

Links to social sites, such as facebook and twitter, are almost a necessity these days. Luckily, it’s really easy to insert your own set of custom icons with the appropriate linking syntax in your posts so your guests can easily share your awesomeness with all their friends!

Places to Find Icons

• Icon Finder – icon search engine
• Smashing Magazine – all posts SM has tagged “icon”
• Web Design Ledger – several free social media icon sets

Insert Icons For Every Individual Post

• Download or create your desired icons and upload to your theme’s “images” folder.
• Go to: Appearance>Editor and open single.php, which is the default template for displaying a single post.
• Create a div to hold your icons. You will likely want to place it either directly before or directly after the line:

  <?php the_content() ?>

• Each sharing site has a slightly different way to direct sharing links. Here is an example for my Twitter sharing icon:

  <a title="Click to Tweet This!" href="http://twitter.com/home?status=Enjoyed:
  &lt;?php the_permalink(); ?&gt;" target="_blank">
  <img src="&lt;?php bloginfo('template_directory')?&gt;/images/ticon.png" alt="" /></a>

• This code means that when your designated Twitter icon is clicked, it will open a new window/tab to twitter.com and input “Enjoyed: http://yoursite.com/blog-post-title” into the status field.
• To customize this code, you can change “Enjoyed:” to a different phrase. You would also change the image name to your own image name.
• For more sharing codes, visit this great article by anidan.design. Note: Her article is for text links, not image links.

Recommended Plugins

Plugins are the lifeblood of Wordpress sites. They are third-party scripts that add amazing extra functionality. They are easy to implement, and usually require little extra work on your part to activate them.

• Contact Form 7 – definitely one of  the best contact form plugin around. Allows for great customization of the look and feel of the form. Form fields are handled in the backend of the plugin and are inserted into posts via a shortcode customized to each form. Great documentation for total customization can be found on the main plugin site.
• WP Post Thumbnail - lets you pre-define 3 thumbnail sizes which you then upload via the interface located below the WYSIWYG area of each post and then crop to the correct size. The thumbnail is then attached to a custom field which can be called anywhere in your theme. I use this plugin to easily grab and crop my thumbnails for use in my featured slider, blog, and client spotlight areas on my home page.
• WP-Table Reloaded – also called using a shortcode and managed in the plugin backend. Easily customize via CSS. Supports row highlighting. Great documentation included on the plugin homepage. I use this plugin for the table on my services page.

Other Articles On Wordpress Tips & Tricks

• Custom Field Hacks – by Smashing Magazine
• 55+ Tips, Tricks & Hacks – by wpbeginner
• Hacks and Recipes from Web Designer Wall
• Stupid Wordpress Tricks – by Perishable Press
• 24 Tutorials & Tricks - by Spry Studios
• 20 Incredibly Useful Plugins – by nettuts+

The above was the final logo chosen for the Lincoln, NE event Awesome Camp. In short, Awesome Camp brought together Lincoln area creatives, communicators, and entrepreneurs for a day of sharing and networking.

The following were other concepts presented to this client.

I also modified a Wordpress theme for the Awesome Camp website. This can of course be seen at AwesomeCamp.com

Click for larger image.

This photo manipulation was created as a metaphorical representation of Nebrakan agriculture. The straw ark ridden by farm animals on a sea of corn will bring salvation from starvation.

The ark was created from a single square hay bale image. The bull is one of my family’s own, and the sky image was one I snapped over the family farm. The corn and other animal images were licensed by Creative Commons.

I received the Quivira Capital project through a sub-contract with Social Buzz Media. They were helping Quivira Capital learn to use social media for their business. Their current website and logo, however, were in need of an update.

Quivira Capital provides several financial services, and they are based in Lenexa, Kansas.

The name Quivira refers to historic Indian regions in Kansas and was chosen to reflect our Midwestern roots.

Quivira is said to be one of the seven cities of gold that Coronado’s expedition searched for, thus providing even more of a financial tie-in. A request from the client was to include an element that symbolized a river to relate to the region where Quivira was located.

Next, I did a complete overhaul of their website. The following is a comparison of the old and new home page.

Quivira Capital's old home page.

Click to visit the new Quivira Capital.

I kept the look very clean and minimal. The home page has a simple JQuery slider. I used key phrases from their copy, underscored them using the river element from the logo.

The JQuery slider.

The interior “About” and “Services” page are simply informational text pages. The eRoom was created by their own IT.

The "About Us" page.

Click to visit NGC's website.

New Generation Construction Group, inc., contacted me to create a very basic site for their company. The four page site includes two text pages, a project image gallery, and a contact form.

The design process for this site evolved from my originally graphically intense mockups. The final minimalistic site strongly features the brand colors of red and black. There is a defined structure due to strong use of a grid design system.

For the project gallery, I completed resizing and basic brightness/contrast and hue/saturation alterations for their provided images. The gallery uses my favorite lightbox script, Fancybox.

The project gallery lightbox.

I also created a very basic contact form for project inquiries.

The contact form.

Lora Mae Frecks, the owner of Innoveering Nebraska, originally intended her business to be titled simply “Innoveering.” But due to e-mail not always being the clearest way to communicate, I used “Innoveering Nebraska” in the first round of logos I sent her. She was so pleased with the directions the design was taking that she officially changed the name of the business.

Big changes brought about by great design making me rethink everything!

-Lora