Blogs, content management systems, and forums represent the bleeding edge of website functionality. Gone are the days when static content was needed merely to establish internet credibility; websites with unchanging information are soon eclipsed by peers with news updates, opinions, and reasons for returning viewers to interact with one another.
With this in mind, I’ve compiled a very quick and dirty tutorial on how to turn a basic website design from a flat image into a WordPress blog in about an hour. Please bear in mind that this tutorial ignores many of the finer points of programming and functionality to focus on a solution that the uninitiated can implement in around an hour or two.
Step 1: buy the land
The simplest part of this entire process is the act of finding a web host or web server who can house a WordPress site. There are a near-infinite number of web hosts offering various packages designed to cater to a variety of client needs. If you have questions about what kind of web host might work for WordPress, you should visit the requirements page at https://wordpress.org/about/requirements/.
Step 2: draw the plans
Most designers would approach a project like this with some pencil sketches or electronic roughs. The rough design would indicate where important elements like a page title (or logo), the main navigation, and the body content would all fit together harmoniously. For the purpose of brevity, I’ll assume that the reader has some sort of basic template in an image format. The most important thing in this design is that there is a conceptual window area in which our blog-generated content can dwell. As long as this is planned as a part of the site, a designer or developer is only limited by imagination, time, and practicality.
Step 3: lay the foundations
Once your hosting arrangements are satisfied, you should upload and install the WordPress software. A new user might find this process a bit confusing at first, but I find now that a basic installation will take around a half hour depending on my upload speed and various other factors. The most difficult part of installing WordPress is the creation of the SQL database with which the software will communicate. Different hosts have different means of creating and securing their databases, so there is no single tutorial on this step. Most hosts who offer databases would be kind enough to create them for you. Remember that the important information you need to know to complete your WordPress information must be determined by you or your host during the creation of the database. The wp-config.php file must be filled with the information about your database’s name, the user name associated with it, the password, and the hostname. For more information about these things read up on https://wordpress.org/support/article/how-to-install-wordpress/.
Step 4: cut the lumber
Your original image design needs to be clipped into various parts. Next week I’ll write a detailed tutorial on the intricacies of creating HTML and CSS from a flat image design. Suffice to say, you must convert your single graphic into multiple graphics and lay them out in a simple HTML file.
Step 5: saw and hammer
The first major step in converting this new HTML page into a WordPress template is locating the previously mentioned content window. It is important to compensate in your coding for the fact that this window will need to either scroll or stretch to accommodate the various sizes of posts and pages generated by WordPress. Scrolling will be achieved by adding a scroll variable to the CSS for the window in your style sheet. Stretching can be done in a number of ways, but one should remember that the background graphics for the window will be impacted by the changing size. This is a good moment to make sure that the design for this window has a background graphic that can repeat endlessly and seamlessly. With a tiling background, the text can flow downward in an unending stream without causing any visual breaks.
Once you locate the top of this window in your code, it’s best to write a few comments denoting this for your own purposes. I tend to note the location with the typical comment tag ().
Using Dreamweaver or a similar code editing program, you should create two files. One file should be named header.php and the other should be named footer.php. Copy all of the HTML codings from your newly created page ABOVE your notation about where the window begins into the header. Copy all of the codings from BELOW at the start of the window into the footer.
Step 6: floors and carpets
The new header.php file and footer.php file should work, if coded properly, as a seamless unit. When they are utilized by WordPress as a template, the software will unite them into a seamless file, and any tables or divs that are separated by breaking the original HTML into two files will be united in your browser.
To test them out, just upload these two files into the folder where your WordPress installation is active under the folder wp-content/themes… and choose a folder with a theme you’re not concerned with breaking. Replace this theme’s header and footer files with your own.
A moment should be taken to note that your images should also be uploaded to relevant folders on this server. Depending on how you coded your site, they may be linked in the root directory above the level that the WordPress installation inhabits. It may take some experimentation to place the graphics in the right location, whether this means the main WordPress directory, a level above it, or in the folder for the template itself.
Testing this template is as simple as logging into your WordPress dashboard, clicking on appearance, and selecting the template where you uploaded your header and footer files. Once these files are located in the template that your WordPress installation is using, you should be able to view the blog with the new design live.
Step 7: housewarming
There are an infinite number of ways to furnish your new WordPress site with various plugins, customizations, and widgets. All that has been discussed at this point are the quickest steps to creating a WordPress template from a simple static design.
Database-driven open source solutions like WordPress, Joomla, and Drupal offer a variety of tools for aspiring designers. With each program, the tools can be used to build humble structures full of utility, or grander dwellings to house digital celebrities. These edifices can serve to inform, educate, entertain, and inspire a returning website audience, making that site competitive in our world of blogs and user-generated content.
