The first half of this quarter is going to be spent getting you comfortable with your status as a hacker. When we say hacker, we mean someone who has just enough technical know-how to change things without breaking them. Your value as an asset to an NGO or CBO is your ability to get things done effectively and cheaply.

Being an Awesome Hacker

We don’t have enough time to make you into real web developers or designers so we will get you far enough so that you can learn on your own and have the confidence to fiddle around with websites in ways you see fit.

Real World Example

Child themes allow you to make tweaks to an existing theme that you already like. No matter how nice a theme that you bought or got for free is, it will never be 100% the way you want it, and it will never have all the theme options you want in order to get it that way. Below is a series of screen casts taking us through a real world example of how a child theme helped us tweak the Everett Program website.

Just sit back and watch these. They’re not a tutorial so don’t bother trying to follow along on your site. The idea is for you to just take in a practical example of how a child theme allows you to tweak your site to work to your liking.


Where Is My Content?

You remember making a website from scratch way back in Intro to Web Design. You made a bunch of HTML webpages and put them into a directory (folder). People would navigate from one page to another. It was rather straight forward (well, relatively) where your content was. If you have a page called “About” then odds are that you wrote an HTML page called “about.html”.

Let’s say you  create an “About” page using WordPress and want to see the HTML file. So you go snooping around in the backend of your WordPress using FTP. Where is the about.html to go with the page called “About” that you just made? It’s not there. The reason for this is that WordPress doesn’t work in the same way as the websites we made from scratch.

So How Does WordPress Work Then?

Brilliantly, that’s how. WP, and all content management systems really, are about separating your website into two things

  1. Content (data)
  2. Rules

Think back to Intro to Web Design when you were working with CSS and quickly you found out how inefficient it is to use inline and internal style.

Inline is when you put style directly into an HTML element like,

<p style="color:purple;">Some text</p>

Internal style is when you put all the CSS in the head of the page

Say you’ve got a website containing 3 pages. You’ve used inline style to make all the paragraphs on each page be blue, meaning you added the style attribute into the opening tag of every single paragraph. Every paragraph on your site is now blue. Great. What if you want them red? Go through and change every single blue paragraph to red. What if you want them to be a different font? Go through and add a new rule to every paragraph. This is infeasible.

The solution of course, is just to create an external stylesheet and link it to each page. You separate your website between content like words and images and the rules that govern how those words and images are displayed.

What’s This Have To Do With WP?

I was getting to that. The ethic that drives the thinking of content management is the same as the ethic that saves us time when coding websites from scratch: You enter your data once and then create rules on how to display it later.

As we’ve established, when you use WordPress to create the page “About” it does not create an “about.html” file. When you think about it, things would get really cluttered if that’s how it worked. If your site had 50 pages, it would have 50 HTML files. Also, don’t forget about all the revisions. As I write this lesson there are already 6 revisions. I have pages containing 50+ revisions. If WP made a new HTML file with every revision, then you’d eventually be clogging up your directory with hundreds and thousands of files! WordPress offers a more elegant solution.

WordPress stores all your content in a “database” and then calls up the necessary parts whenever a request for a particular page is made. A database is like a set of interconnected spreadsheets containing every piece of content you produce. Your theme is a set of instructions called “templates” on how that content should be displayed.

In the coming lessons we’ll delve deeper into just how the database and templates work together to create your site, but for now just try and understand that the underlying ethic of WordPress, and web design in general, is to separate your content from the rules used to display it.

These screencasts walk us through an example of what was just explained, so grab some popcorn and watch.


Brushing Up On CSS

The homework, and life, will require you to do a fair amount of CSS manipulation. We recommend checking out the previous CSS lessons from the Beginning Web Lab, or do the CSS track on Codecademy Web Lessons. But here’s just a refresher.

Syntax

CSS, like all languages, has rules for how it must be displayed. CSS goes like this

selector {
property: value;
property: value;
}

If you’re working with CSS and your changes don’t seem to be applying, a lot of the time you can look at your syntax and see that you forgot a semi-colon or bracket.

Hex Colors

The homework will have you changing the color of a lot of stuff and asking you to use “hex codes”. This just means that when you specify the color value of something, you use a string of letters and numbers preceded by a pound sign like “#6fa062″ rather than a word like “Everett Green”.

Hex codes are a way of representing colors with exact numbers rather than names. They’re called ‘hex’ because they’re represented by 6 digits and because the numbers use a hexadecimal base rather than decimal. There are 16 numbers per digit rather than 10, which means you can count higher.

Spacing

CSS uses the “Box Model” to determine the dimensions of an element. Say you have a paragraph, now picture a series of boxes around it. Here’s a diagram:

css_box_model

  • Content: The thing you have written, an image, whatever
  • Padding: The space in between the content and the border. Padding shares the background color of the content
  • Border: The area framing the content
  • Margin: The invisible area around the whole element and is the space between elements

Divs

The assignment will explain divs better than I can here since they’re somewhat abstract, but here’s a brief explanation.

<div> is an HMTL element that acts as a container for other elements. It has no border, margin, padding, color, or properties of its own until you change them with CSS. Think divs as a way of grouping sections of a page together and then applying rules to them at large.

Homework Assignment

Part 1

A new lab means a new WordPress instance!

Using the 5 minute install method, install a new WordPress instance at yourdomain/wordpresspart2

After you have it installed:

  • delete the sample page under Pages
  • delete the Hello World! post under Posts
  • Install the WordPress theme Twenty Twelve.

Before we move on, download the wp2_lesson1_files1 zip file. We will use these files in the next few steps in Part 1.

Next, create a new page:

  • Title it Home.
  • For the body text, use the text in the file that I provide you in the Testpage.txt.
  • To download and save this file, right click the link and hit “Save link as” and save it as testpage.txt. Just copy the text from the document and paste it in the body of the Home page.

Next, create a new page:

  • Title it Blog.
  • Leave the body text blank.

Next, create a post:

  • Title it Doing Well in Lab
  • For the body text, use the text in the file that I provide you in the Doing-well.txt.
  • To download and save this file, right click the link and hit “Save link as” and save it as doingwell.txt. Just copy the text from the document and paste it in the body of the Doing Well in Lab post.

Create a custom menu. Add both pages to the custom menu.

Under Appearance, go to Customize and set the Home page as the Front page and set the Blog page as the Posts page.

Part 2

We need to refresh ourselves on CSS.

Download the wp2_lesson1_files2 zip file. It contains an HTML and CSS file. You don’t need to make any changes to the HTML file. You will make changes to the style.css file. Directions for what changes to make are comments within the style.css file.

Tips for Doing This Assignment

A lot of times, you’ll be asked to change fonts or colors. Refer to this page for fonts and use this tool to pick hexadecimal colors. You must use hex colors for this assignment, no words.

If you don’t remember how to alter a given property, just google that property. 99 times out of 100 the very first result will be the W3Schools page on that property.

Submission

Email wordpress@labs.everettprogram.org the web address of your new WP instance, yourdomain/wordpresspart2. Attach the edited style.css in the email.

Your email subject line needs to be in the format: HW#1 Firstname Lastname.

If your assignment is late or a resubmission, add it to the end of the email subject line.