Chronicles of the WordPress Website Build – Phase 1

lwd_portraitHere at LearnWebDevelopment.com we have an internship program that gives our students the opportunity to accept jobs building websites and working with real clients. One of our interns, Sam Hamdy, is currently working on an exciting project that we want you to be a part of. Over the next few weeks, we will reveal the details of this project. Here’s the beginning!

Take it away, Sam…

Welcome everyone! It’s my pleasure to share my experience with you.

Day 1

I received an email from Conrad asking if I’d be interested in participating in the Internship Program. I said I was, and saw this as a great opportunity to both hone my skills and earn some income.

I had limited experience designing and developing with WordPress prior to this, so I thought this would be a great way to gain some more experience. I really had no idea what to expect, or what would be involved, but I knew I would have help if I needed it.

Day 7

I received another email from Conrad, this time introducing me to the other team members and providing some information on the client. I “met” David, who would be providing development and technical support, and Christina, who would be managing documentation of the project for training.

The client is a restaurant chain with several locations. Later in the day, I received access to the build documents, which specified the scope of the project and redesign.

Day 9

This project began with selecting a theme from the WooThemes portfolio for the client’s site. I started by reviewing all themes in the Responsive category, since that was a prerequisite.

I was tasked with choosing two or three themes that looked like good matches, and I selected three themes that looked suitable for this client – Hustle, Merchant, and Whitelight. I chose these themes based on their features and look & feel, and also their similarities to the example sites that the client provided.

001. hustle

Hustle Theme

002. merchant

Merchant Theme

003. whitelight

Whitelight Theme

The Hustle theme was ultimately chosen for this project. This theme was chosen because it has a clean, simple framework, which will best allow us to feature images of the client’s food and customers.

Conrad explained that he likes to go with this type of theme for product-based businesses, and a theme with more built-in design elements for service-based businesses.

Day 10

The next step was to install WordPress on the client’s hosting account. This was a manual install, and there were several steps necessary to complete it. I followed the instructions in the Successful Web Designer training, Lesson 4, Part 5, to complete the install.

This started with logging into the client’s hosting account, creating a database and user, and assigning all privileges to the user.

004. database_user

Creating the Database and User in Client’s Host Account

I then downloaded the latest version of WordPress and uploaded it to a new folder on the client’s website.

005. wordpress_download

Downloading WordPress from WordPress.org

006. wordpress_upload

Uploading WordPress to Server

This is where I hit my first challenge: I wasn’t able to access the WordPress install page from the client’s site.

I then contacted the host’s support, and was provided a temporary URL that would be used to build out the site. They also made changes in the database to reflect use of the temporary URL. I then contacted David to confirm that everything looked good.

Once I got the OK from David, I created a username and password for logging into WordPress, linked the installation to the database I had created, and completed the install.

I also began working on the logo in preparation for building out the site. The client had provided the logo in a PowerPoint document, and I had to play around with it to determine the best way to create an image that could be used on the website.

The process that ultimately worked best was converting the PowerPoint file to a PDF file, opening it in Photoshop, removing the background, and saving it as a transparent PNG file.

007. pdf_export

Exporting Logo as PDF file

008. pdf_photoshop

PDF in Photoshop

I used Photoshop’s Magic Wand tool to delete the background.

009. pdf_background_removed

PDF with Background Removed

010. pdf_save_png

Saving PDF as Transparent PNG File

There were two priorities behind creating the logo this way. First, to make sure that the quality of the image was preserved. And second, creating it with a transparent background, which assured that if the client ever changed the background color of their site, no editing of the logo would be required.

Watch this video for how I created the logo from a PowerPoint file in Photoshop:

Day 11

Work on this day started with uploading the Hustle theme to the server. I followed the instructions in the Successful Web Designer training, Lesson 4, Part 18, to complete this step.

I received the theme in a .zip file, and then uploaded it to the server. I then activated the theme to make sure everything looked OK.

011. theme_upload

Uploading the Hustle Theme to the Server

The next step was to create a child theme, based on the Hustle theme. This was necessary so that any updates to the Hustle theme would not override our customizations.

I followed the instructions in the Successful Web Designer Bonus Lesson (Part 11) to complete the following steps:

First, I created the child theme and activated it.

012. chlild_theme

Child Theme Activated

I then created a custom style.css file, to be used for customizing the CSS on the site.

013. stylesheet

Custom Stylesheet (style.css)

Finally, I created a thumbnail image in Photoshop for this theme, for display in the WordPress Dashboard. Since the client may be using the Dashboard to edit their own content, we wanted their custom theme to have a professional and polished appearance.

This was a relatively simple process in Photoshop: I created a new file sized 300 x 225, placed the logo, and saved as a PNG file.

014. dashboard_thumbnail

Child Theme with Thumbnail Image

Then, I created a thumbnail image in Photoshop for the WordPress Dashboard. Check it out:

The chronicles don’t end here. We’ll share the full details of this project with you. You can duplicate the steps for your own sites and learn how to work with a real client.

To see all of Sam’s chronicles, including how he uploaded the logo to the theme, activated plugins, worked with custom CSS, the WordPress Page Editor, and more, join The Successful Web Designer today! If you are interested in becoming one of our interns, like Sam, be sure to join at the Gold Yearly level.

If you’re already a member and would like to become one of our interns, click here! We’ll help you upgrade your current membership so you can take advantage of this unique feature.

Submit a Comment

Your email address will not be published. Required fields are marked *