Many of our customers already have websites when they come to us for the first time. Some of them only need a new web maintenance team because their old web people were unreliable or hard to work with. Others ask us to redo their entire site. Since our web work is performed using WordPress, sometimes that means we have to duplicate a website that’s in another format by using WordPress to recreate it.

Step 1. Install your theme.

Install “bare-bones” theme on WordPress.  Basically, there is no styling whatsoever, so everything looks like default, plain HTML. The background is white, the text is black, and the hyperlinks are blue.

Step 2. Change the basic background color, font, and text color.

Start with simple things like body background color, fonts, etc. These are considered the basics of designing for the web.

Step 3. Define separate sections.

Create HTML container elements (usually divs) to wrap the different sections.  It’s important to be sure that these elements are wrapped around the WP-specific code properly, so that the content will show up in the appropriate places. Different sections can include complex pieces of the site; the code for the navigation bar is a good example of one separate section. It’s helpful to implement borders around the different sections at first, so the web programmer can set the sizes, then worry about background colors, images, and other things that won’t change the layout of the page.

Step 4. Remove outside references.

Make sure to hide things like “proudly powered by WordPress”, comment links, and other things that don’t fit into the design. These may be the default WordPress settings, but they are optional, so we usually remove any “free advertising” to make sure the focus of the website is on our client.

Step 5. Add images, links, and other elements.

Once the page is laid out roughly the way it should be, it’s time to get more involved with padding, complex backgrounds, images, links, etc. If you don’t know what “padding” means when it comes to websites, think of the same kind of soft padding one might add to a package before it’s mailed. It’s a way to add filler space around an element on the site, such as a paragraph of text.

Step 6. Make final tweaks to the style.

At this point, the only thing left to do to set up the layout is to start whittling away at the smaller things.  It helps to have the existing site and the new site open side-by-side for comparison, like a “spot-the-difference” challenge. With this method, differences are quickly and easily pinpointed.

Step 7. Load content and review for release.

Once the layout seems to be the way it should be, the content can finally be added to all the different pages in the WP backend. In this situation, “content” means text, usually written by one of our content writers or by the client personally. After our team in the office reviews the content for accuracy, spelling and other possible flaws, all that is needed is client approval before the website can be launched.

If you have any questions about this process or about other aspects of web work, don’t hesitate to contact us! We’d love to hear from you.