Topic outline
General
Designing Self-Hosted
Websites with Wordpress
Many of today's websites are powered by Wordpress, a blogging tool and content management system that also lets you create static pages, shopping carts, and anything else you need to build a website. The beauty is that once the site is live, your client can make their own changes and you can move on to building more websites for new clients.
This course assumes that you have a working knowledge of html. If not, there's no time like the present. Here's a link to the W3 html tutorial:
http://www.w3schools.com/html
Please respond to this poll:
http://www.polleverywhere.com/free_text_polls/LTU4NTQ2MDI1Nw
10 points
Get Ready...
- Computer requirements to take this class: You need a relatively new (three years old or less) Mac or PC computer.
- Download and install Mamp (for Macs) or Wamp (for Windows) to set up your computer as a server so you can have a copy of your website on your hard drive as well as the one that's live on the net. The movie below gets you most of the way there:
http://www.lullabot.com/videos/install-local-web-server-mac-osx - If you are using a pc, watch this video: http://www.youtube.com/watch?v=He3AFcGjUmw
- You will need to buy a domain name (for example demillodesign.com) and web hosting in order for you site to be live on the internet. Before you choose a web host, watch this movie and make sure your web host can meet these Wordpress requirements: Video Link
I use GoDaddy, but would not recommend them because their site is too busy and all they do is try to sell you more. Go to this link if you need help finding a compatible web host: http://wordpress.org/hosting - You will need an html editor in order to edit css and php files. You can use Notepad on a Windows pc or download TextWrangler for free to use on a Mac.
- You will need an ftp (file transfer protocol) software installed on your computer in order to upload your site to the internet. Filezilla is free and works with Wordpress. You can download it at http://filezilla-project.org. You can also use CyberDuck of you own a mac.
- Download Firebug. It's free and it will allow you to examine the structure of the website your are building.
- Computer requirements to take this class: You need a relatively new (three years old or less) Mac or PC computer.
Topic 3
Cascading Style Sheets (CSS)
CSS is basically a list of rules that will tell the browser (like Firefox) how to display your page. In the next tutorial you will become familiar with CSS and take an online quiz.
Topic 4
Creating the image:
http://aviary.com
Watch the video and make a header image to upload.
Uploading:
http://www.templatesfactory.net/articles/the-most-important-html-and-css-tips-for-wordpress-newbies.html
Do this tutorial to get an image in your header. Make a blog post about how this worked for you and email me so I can grade your progress. 10 points.Topic 5
Designing for Wordpress Tutorial from CSS Tricks
This tutorial will give you practice in writing and editing code, starting from scratch with the Starkers theme and going through the steps to modify the theme. The beauty of Wordpress is you can mess around with different themes, but can activate only one at a time, so if you totally mess something up, you can just activate a more successful theme.
http://css-tricks.com/designing-for-wordpress-complete-series-downloads
When you are finished, write a post in your blog about how this tutorial worked for you and upload a screenshot of the results in the assignment section below. 20 pointsTopic 6
Create Your Own Wordpress ThemeIn this tutorial, Ian Stewart walks you through the creation of a theme from beginning to end. I did this entire tutorial and my theme doesn't work, but I learned alot about what all the php pages are in the Wordpress themes.
http://themeshaper.com/wordpress-themes-templates-tutorial
In this tutorial, Alex Denning walks you through creating a Wordpress theme.
http://wpshout.com/a-beginner%E2%80%99s-guide-to-wordpress-themeing-day-2-index-php-and-style-css/
Choose one of the tutorials and go through it. Make a screenshot of your (hopefully) success and blog about the process you went through, the problems you had, and what you learned. Look at other students' blogs and comment on their posts and help them out if you can. 30 pointsTopic 7
Making a Child Stylesheet
http://themeshaper.com/how-to-protect-your-wordpress-theme-against-upgrades
Ian Stewart walks you through how to make a child stylesheet that will override the parent stylesheet in your theme and give you even more control over the look of your blog.
When you are finished, make a post on your blog with a screenshot of what worked or didn't work. Look at other students' blog posts and comment. Help them out if you got something they didn't. Upload your screenshot in the assignment section below so I will know when to check out your blog. Be prepared to make revisions if something didn't work.
20 pointsTopic 8
Intro to JQuery
JQuery is a javascript library that can add things like fading in photos and other dynamic elements to y our blog.Topic 9
OK, now it's time for you to play
Throughout this course you have had to follow tutorial after tutorial in order to learn the myriad of details you need to know in order to make your blog your own. Now it is time to take control and really make your blog your own.
Download and customize any theme you want to. As always, upload a screenshot when you are done and post an entry in your blog that details your choices, what you did and why.Topic 10
Last post for this class
Please take a moment to give me feedback on what you found valuable and what changed I could make to improve the class. My own experience in trying to learn Wordpress and JQuery has been mostly a series of frustrations with an occasional glimmer of success. However, I keep plugging along, and I am learning a lot as I go.
This will not be graded as such, but you will receive 10 points just for doing the assignment.