Days 1 & 2 – Summary of Chris Coyier:
WordPress 3: Creating and Editing Custom Themes
Before starting on developing a website, it is not only important to determine the client needs but also to think about future needs of the client as well as the how we can streamline later work for ourselves or others that may update the website. This is where determining what Content Management System (CMS) to use becomes important.
One of the most popular programs currently used is WordPress. It has an easy to use interface, blogging potential, is extendable, and of course contains a full CMS.
In the Chris Coyier tutorial WordPress 3: Creating and Editing Custom Themes, he goes through the entire process of conceptualizing, designing, and coding a complete WordPress theme according to the specific needs of a client, in this case a fictional company called “Widget Corp”. Here are the steps he took in a “bird’s eye” outline:
Created a design in Photoshop:
- Using an Ideas folder, created a Mood Board in Photoshop with styles, typography, textures, color swatches, etc.; additional graphic ideas files to incorporate into the mood board also located in the Ideas folder.
-After developing the Mood Board, he opened a new Photoshop file to create the homepage design mockup – 800×1200 / 72dpi (1200×1400 canvas)
Created a webpage template based on that design using HTML and CSS.
- Coded the HTML
–Using TextMate to code
–Using proper semantics
–Had Photoshop file open as you code the HTML
- Next, coded the CSS…
–Had the Photoshop file
–HTML open in browser
–Opened another file to code CSS in. (using TextMate) Ultimately created two CSS files: style.css; home.css
Next, went to WordPress and created a new theme from scratch – here is where he dives into building a WordPress Theme utilizing the theme developed earlier.
-Demonstrated setting up MAMP for Mac and WAMP for Windows
–Determined Sequel Pro for database (Mac)
-Modifies important settings (such as the Permalink)
-Next he replaced the WordPress 3.0 2010 theme with the blank theme
-Going forward, we are introduced to the template file structure and then to moving the static HTML and CSS to dynamic in WordPress.
-Next he walks us through building the sidebar, then the navigation, to the “recent blog post”, then to how to fetch external content from another website – which wraps up the elements on the sidebar portion of the website.
-Following the sidebar, we migrate to creating the custom home page.
-Next is a discussion about how Custom Fields work in WordPress – in particular for this project in relation to new product pages (storeproduct.html). He discusses the smart way to store data such as product information – what a CMS is best at.
-Time to move to the rest of the website pages, of which he goes through building step-by-step:
–Product page (using some PHP)
–Category page (again using PHP)
–Creating the blog home page and the single blog entry page
-We round out this segment in Building a WordPress theme with:
–How to implement comments (a great feature in WordPress) and then…
–Finish up the home page (changing out the two sprocket areas from static to dynamic).
- Important things to remember about WordPress – it is there to help you serve up content:
–It doesn’t care what HTML you use in your theme.
–Or what CSS you use in your theme.
-You can use plugins to do some “really cool stuff” - a great way to extend WordPress.
–Use for Spam Blocking – must install Akismet!
- Finally he wraps up this section discussing setting up security – an important task!
–Not mentioned in this tutorial, but a great backup resource is “Backup Buddy”!
–He suggests VaultPress or Automattic
In conclusion… suggested these WordPress resources:
- “Digging into WordPress” – digwp.com/book
- Justin Tadlock’s site
- WordPress News and Information
Day 3 – Summary of WordPress conversion to website process:
Converting a Static Website into a WordPress Site
The Anatomy of a WordPress theme infographic is the perfect cheatsheet for how your blog works. The four main parts of the WordPress blog are – the header.php, The Loop, sidebar.php, and footer.php. Of these four parts, The Loop is the most powerful part of the WordPress theme. It starts with a query and ends with an “endwhile” statement. What happens in between, is up to you! In order for a WordPress theme to work, it also needs a few essential background files, such as comments.php, functions.php, and styles.css. Extras like plugins, custom fields, and widgets, allow you to further customize your site.
In the tutorial Convert HTML to WordPress, we learn that WordPress works in a rather straightforward manner, but it often seems confusing for those of us new to the concept. WordPress relies on PHP to call on different parts of content from the database management system it stands on. This basic function of retrieving or calling some kind of data from your database and using PHP to display it in your HTML is how WordPress works. By substituting PHP for different parts of content and code will make editing easier using WordPress.
Here are the overall steps in achieving a WordPress site from a static website:
Create a new folder and then create two new files to put in it – styles.css and index.php. Open the styles.css and copy/paste your styles.css file from the static site, adding some specific code at the beginning (as posted in the tutorial).
Next, chop up the HTML – approximately in 3-4 sections. Create three php files to add into the theme folder – header, sidebar, footer. Add in copy of sections of the HTML file that you segmented into sections – header, sidebar, footer, and finally the index.
Now, go into the index file and add three lines of code – one at the beginning and two at the end (per code listed in tutorial). This will tell WordPress to fetch and display these items.
The final step is to insert the actual content into the code. The Loop is the PHP function WordPress uses to call and display posts from the database they are saved in. Grab the code from the tutorial and paste it into your new theme’s
index.php file (inside of whichever
div you are using to hold your content). WordPress will use the loop to display your posts and comments on your website.
Now upload your theme folder to
/wp-content/themes/. Then log into WordPress and activate your theme!
Day 4 – Blog post about my first thoughts about the Themeshaper tutorial: