Ladies Learning
WordPress

Original Content by Wes Bos

Your Lead Instructors Today:

Open these slides in a modern browser and use your arrow keys to follow along

These Slides are available at http://wesbos.com/llc/slides

They will always be up and always be updated! No real need to save them locally.

Today

What is WordPress?

An Open Source Content Management System used to power thousands of websites

Initially was used to power blogs

Powerful enough to run large websites and applications

Used by Mashable,CNN, Jay-z and many more...

WordPress.com VS WordPress.org

WordPress.com is Hosted for you - No servers or code required!

.com Doesn't allow for a lot of customization. No plugins or custom themes.

We will be using the self-hosted .org

Self-Hosted allows for 100% customization - Themes and plugins oh-my!

Jargon and Buzz Words - Welcome to our world

localhost - / Local Server (MAMP or WAMP) - A small service that runs on your laptop which mimics the functionality of a large, paid server. We are able to work on our website without uploading it anywhere.

PHP tags - PHP is the programming language WordPress is written in. When we need to use PHP, we put it inside <?php and ?> tags so our server will know to process it as PHP.

stylesheet - The style.css file within our theme. From this file we control the colours, fonts, sizes and all style elements for our website.

Dashboard - The WordPress back end you see when you first log into your website

Codex - The WordPress documentation. Very helpful when you require a reference or assistance with a certain part of WordPress. http://codex.wordpress.org/

Permalinks - Human readable URL. When turned on, WordPress changes the url structure from something like MySite.com/?p=54 to MySite.com/contact-me

Theme - The collection of files that we use to lay out and style our WordPress website. WordPress allows you to easily change and modify themes without losing any of your posts or pages.

Template - A specific file within our theme that lays out either an entire page or part of a page. For example, page.php is the template within our theme that lays out the structure for all of our pages

Post - A piece of content that is stored within the database. When we use the word post, we are referring to a blog post.

Plugin - An installable package that adds functionality to your Wordpress website.

Query - A request to the database that asks for certain posts based on several supplied parameters.

Text Editor: - A program that runs on your computer, used for editing code..

All code is written in plain text, so you could just use notepad or textedit to edit your theme

Using a text editor makes things a lot easier on you and I recommend using one today.

There are tons of text editors available - Sublime Text, text wrangler, NotePad++, Text Mate, vim...

I recommend using Sublime Text which has an unlimited trial but you are welcome to try anything you like - your table's mentor may have a specific favorite too!

http://www.sublimetext.com/2

Do not try and edit your theme from the WordPress back-end

Code + Database =

The database holds our data and the code defines how and when the data is printed to the page

The two work together to output HTML

/wp-admin and /wp-includes holds the engine of WordPress - we don't touch it.

/wp-content holds our specific content like themes, plugins and image uploads.

Installing WordPress!

Installing wordpress can be a little tricky the first time, so pay attention here and it will all go smoothly!

Step 1: Unzip the wordpress package you downloaded, you'll have a folder called wordpress

Step 2: Move that Folder over to your local server (localhost).

TIP: Make sure you only have one folder called wordpress. You shouldn't have a folder called wordpress inside of one called wordpress!

If you need help finding the folder: Windows: Click WAMP icon in tray → www directory Mac: click MAMP icon → Preferences → Apache Tab

Step 3: Open up PHPmyadmin and create a DB called llc

Windows: Go to http://localhost Mac: Go to http://localhost:8888/MAMP/ Both: click PHPMyAdmin tab

Step 4: Rename wp-config-sample.php to wp-config.php and open it

Step 5: Open in your text editor

Step 6: Set the below.

Windows Users: Leave password blank.

Step 6: Surf to http://localhost/wordpress or http://localhost:8888/wordpress in Chrome (or your favorite browser like Firefox or IE10) and install!

Customizing settings and adding content

We need to create some dummy content on our website so we can work with the site.

Create 7 posts, fill them with some dummy content Make sure to add a few tags/categories to each.

Create 3 pages called Blog, Contact and Home

The Boring parts are almost done, I promise! Have some fun any use some Lorem Ipsum:

hipsteripsum.me,cupcakeipsum.com,baconipsum.com

More Settings!

1. Set Blog page and home page accordingly

Settings->Reading

2. switch # of posts to 5

Remember Permalinks? Lets turn on pretty permalinks

Settings->permalinks

You're done settings up!

WordPress Themes

Themes control how your site looks

Your Data (Posts, Page, Comments...) is stored in the database so you wont lose your data if you switch!

There is no limit to what a WordPress theme can look like

There are thousands of themes available for free or for pay

Many great WP Developers got their start tweaking exisitng themes

So... Thats what we're going to do today!

Some good and trusted theme resources

Wordpress.org/extend/themes - All Free

Themify.me Paid & Free

WooThemes.com - Paid and Free

ThemeForest.net - Paid / Inexpensive

+ Many More - anyone have a favourite?

The Ladies Learning Code theme

The default theme is a little confusing, lets install a simpler one we can build upon!

All themes live in /wp-content/themes

Unzip llctheme.zip and drag+drop into your /wp-content/themes folder

Dashboard → Appearance → Themes

We Now see our Ladies Learning Code Theme, go ahead and activate it.

Anatomy of a WordPress Theme

A WordPress Theme is made up of a number of template files that are used to display different pages on your site


For Example...


single.php is used to show a single blog post while index.php is used to display the main blog page listing your most recent posts. More on this later.

Theme Layout Basics

Most template pages can be broken down into the following:

<?php get_header(); ?>

{ The Page's Content and the Loop live Here}

<?php get_sidebar(); ?>

<?php get_footer(); ?>        

Exercise #2

Let's get comfortable with the basic building blocks of our theme. We're going to edit sidebar.php and footer.php

Exercise #2: Task #1

Open footer.php add your name to the copyright. Save it and refresh your website.

You now have your name at the bottom of your website. Easy, eh?

Let's step it up a notch!

Adding a picture of you to the sidebar!

Open sidebar.php and look for these comments:

In our theme folder, we have an image called portrait.png in our i folder. Let's use that one to embed into the sidebar. If you wish you use your own image, simply put your image in the i folder.

To embed the image, we use an img tag. Here we will use a template tag to get the full path to the image in our theme folder. We need the path to the image and the file name

<img src="<?php bloginfo("template_directory"); ?>/i/portrait.png">
outputs:
<img src="http://localhost/wordpress/wp-content/themes/ladies-learning-code/i/portrait.png" alt="">

You're Done!

You should now have an image in your sidebar

What are all these other files?

Different Pages can be displayed with different layouts.

Example: 2010 Archives can have a different layout than a category view.

Let's take a look at the important template files ones in our theme...

archive.php Shows Archives of old posts

author.php - Displaying all posts by a certain author

category.php - Displaying all posts within a certain Category

footer.php - The footer that is appended at the bottom of every page

functions.php -Commonly used for enabling theme features such a custom navigations and post thumbnail sizes

header.php- The footer that is appended at the bottom of every page

index.php- The front page of your blog, displays the latest n posts

loop.php - A reuseable file to display posts (much more later!)

page.php- Default template for displaying pages

search.php- Template for displaying search results

sidebar.php- Sidebar that is appended to every page

single.php- Default template used for displaying a single post

tag.php - Displaying all posts within a certain tag

CSS 101

Before we can start customizing our WordPress theme, it will be helpful to learn the basics of CSS. We won't be diving too deep into CSS as its a huge topic on its own, but lets take a quick look at it.

CSS stands for Cascading Style Sheets, they allow you easily add style to the elements on your website. Examples of elements are heading tags, images, divs (content and sidebars), links and lists.

For the purposes of this class, it's enough to open the style.css file in your theme and try change colours and fonts from there.

A basic CSS definition has three parts: selector, property and value.

Selectors

The Selector defines which element the CSS will be applied to.


<div class="post"> ... </div> 
div.post { ... }

<span class="date"> ... </span> 
span.date { ... }

<span class="category"></span> <div class="meta"></div>  
span.category, div.meta { … } 

<div class="parent"><div class="child"></div></div> 
div.parent div.child { ... }

        

The Property and Value

The property defines which style is being set on the current selector and the value set it.

There are hundreds of CSS Properties, here a few popular ones for a div with the class of wrapper

.wrapper {
  background : black;
  border:2px solid green;
  font-family:Georgia, sans-serif; 
} 

Let's go through a bunch of common CSS...

a {
  text-decoration: none; /* Removes all underlines from links */
  color: blue; /* Changes all links to blue */
}
a:hover {
  color: red; /* Changes all links to red  only when we hover*/
}
.post {
  background : url(relative/pathp/to/the/background.png); /* Add an image to the background */
  border: 3px solid yellow; /* add a yellow border */
  padding:20px; /* Increase padding to 20px */
}
.post h2 a { /* finds .post -> Heading 2 -> links */
  font-size:40px; 
  font-family: georgia, sans-serif; /* change the font */
  border-bottom:3px solid goldenRod; /* Changes the bottom border only to goldenRod colour*/
}
ol li { /* Selects all ordered list items */
  list-style-type: upper-roman;  /* Changes from 1,2,3 to I, II, III...*/
}
list-style-type: square; /* changes from circle bullets to squares*/
  font-style:italic;
}
.more {
  float: left/right/none; /* floats an element to the left or right of its relative parent */
  text-align: center/left/right/inherit;
  margin: 10px 20px 15px 25px; /* Top Right Bottom Left margin values*/
  font-weight:bold;
  width:100%;
  height:500px;
  overflow:scroll; /* anything over 500px high will have scrollbars */
}

Exercise #3: Theme Customization!

Now that we have a good feel for our theme layout, let's customize it a little more

1. Change the background colour for our site

2. Add a pattern to the background

3. Change the link colour from red to something else

4. Add a background colour to our nav links when you hover them

5. Center your website title

1. Change the background colour

Open your style.css file

Locate the line that sets the body background colour

Change it to whatever colour you want!

#BADA55 #B1009A pink papayaWhip goldenrod seaGreen

whiteSmoke tomato thistle skyBlue yellowGreen

Visit flatuicolors.com or colours.neilorangepeel.com for some inspiration!

2. Add a background pattern

Find your body selector and add the following code:

background: url(i/bg1.png);

This will pull the files from your i folder within your theme. Take a look at the available 4 images or download your own from subtlepatterns.com.

3. Change the link colour from red to something else

To select links with CSS, we use the a { ... } selector. Find this in your code and change the link colour to something else

4. Add a background colour to our nav links when you hover them

Our navigation is simply just a list of links that have been styled. We can change the look of these links with the navigation link selector. We can also change the colour or background colour on hover. Let's try that!

5. Center your website title

Your website title is aligned to the left by default. Let's write some CSS to center this.

In style.css look for the Hero Styling section:

Under the .hero selector, add text-align:center;

The Loop

What is the loop?

The loop is the lifeblood of a WordPress Theme, is it use to iterate over and display each of the posts that are available on a given page.

The Loop in plain english

“For as long as there are posts to show, show them”

Our home page loop shows 5 posts, but a single post page only shows 1.

Every page has at least a basic loop to output that page's content.

Sudo Loop

This is the logic behind the loop in plain english

  if we have posts
      while we have posts
         1. The Code in here is run once for every piece of content 
            retrieved from the database
         2. We might want to output the title, the date and the content
      end while
  end if

Confused?

Lets step through how WordPress works if someone visits your blog home page and when someone visit your blog page.

The Loop Steps

1. The blog page is requested by the user. Wordpress asks the database for all content for that page.

2. The database returns 5 of the latest blog posts

3. Wordpress first grab the header.php file and starts the page output

4. Wordpress then hits the loop. Since we have 5 posts from the database, we output the code within the loop 5 times

5. Wordpress is done the loop, it moves on and outputs the sidebar and the footer

The Code

A stripped down look outputting only the title and the content.

<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>

    <h2><?php the_title(); ?></h2>
    <?php the_content(); ?>

<?php endwhile; ?>

Still Confused? Dont Worry!

Our wordpress theme comes with the loop.php which handles most of this for you.

You just need to be aware of how the loop works and what it looks like so you can edit it!

Template Tags

Wondering how to actually get your content onto the page while you're inside the loop?

Template tags are short little PHP functions that will output content from your site.

No knowledge of PHP is required.

Most template tags only work within the loop

Others are global and can be used anywhere on the site

Remember we used <?php echo home_url( '/' ); ?> in our header?

Template Tag Examples

There are hundreds of template tags

http://codex.wordpress.org/Template_Tags

Lets take a look at some of the commonly used ones.

<?php the_title(); ?>

<?php the_content(); ?>

<?php the_excerpt(); ?>

<?php the_permalink(); ?>

<?php the_time(); ?>

<?php the_tags(); ?>

<?php the_category(); ?>

<?php comments_template(); ?>

<?php the_author(); ?>

<?php the_post_thumbnail(); ?>

Exercise #4: Working with single.php and the loop

1. Open single.php in your editor

Type Hello, I'm editing single.php! on the second line.

Save the file and go to a single post on your website

Do you see where it says Hello, I'm editing single.php!

We dont see this on any other page because single.php only controls single blog posts.

2. Add a post thumbnail with template tags to our single.php

Want to associate an image with each of your posts? Let's create something like this:

Go into the wordpress admin an edit one of your posts.

At the bottom right, click set featured image.

Select and upload a file. You will need a rather large image for this. If you don't have any available, use the provided images in the learner files folder.

When the upload is finished, select "Set featured image" from the bottom right

Click update

and then view the post.

The image doesn't appear! Why not? We need to use the template tag to add it to our theme!

We will use the template tag the_post_thumbnail() to pull the image in. In single.php look for the comments and use the following code:

<?php the_post_thumbnail('wide');?>

Adding a sub-title to our website

On every page we want to have a sub-title tagline underneath the website title.

Step 1: Adding the sub title

First we need to add the sub-title description to our header.php file. Go ahead and open this file and look for the hero div.

Under the closing h1 tag, add the following h3 and template tag:


<h3><?php bloginfo('description'); ?></h3>

This will pull in the text you previously set under settings → General

Step 2: Adding the CSS

Open your style.css file and scroll down to the hero section. Our final CSS is on the next slide, but let's step through and code it ourselves!

.hero {
  /* Style the hero here */
  text-align: center;
  background-image:url(i/herobg.jpg);
  background-position: top;
  background-size:cover;
  background-attachment: fixed;
  overflow: hidden;
  padding:100px;
  color:white;
}

.hero a, .hero h3 {
  color:white;
  background:rgba(0,0,0,0.6);
  display: inline-block;
  padding:10px;
}
        

Custom Page Templates

Sometimes we don't want the same old structure for every single page

What if we want one page to have a totally different structure? No sidebar? Three Columns? Full page map?!

The sky is the limit!

For this, we use something called custom page templates

We can create many templates that are similar to page.php and assign them to various pages

Exercise #5: Creating a Custom Page template

We're going to create two custom page templates

The first one will be a simple page without a sidebar for our pages that don't require a sidebar, like our contact page!.

The second will be our custom landing page for our home page.

Lets get started!

Step 1: Duplicate our page.php file and rename it page-nosidebar.php

Step 2: at the top of page-nosidebar.php let name our template with:

<?php /* Template Name: No Sidebar Template */ ?>

Your Code should look something like this:


Step 3: We don't want a sidebar for this page, so go ahead and delete <?php get_sidebar(); ?>. Make sure to save your file after this change.

Step 4: Go to the WordPress dashboard, and edit your contact page.

You'll now see under "Page Attributes" we have a template dropdown.

Select Contact Page and click update then view.

Building a template for our home page

Let's create a new page called page-home.php

This time, fill it with the following Markup:

  <?php /* Template Name: Home Page */  ?>
  <?php get_header(); ?>

  <div class="section">
    <div class="innerWrapper home">
      coming soon
    </div> <!-- /.innerWrapper -->
  </div> <!-- /.section -->
  <?php get_footer(); ?>

Edit your home page and assign the "Home Page Template"

We will come back to this in our final exercise and build out a custom landing page!

Exercise #6: Widgets!

Widgets are modular items that can be added to your sidebar. You can see there are some default ones already in Dashboard → Appearance → Widgets

How do we add one?

Let's add our latest tweets to our sidebar! Click the link below, log into your twitter account and click "Create New" in the top right.

https://twitter.com/settings/widgets

Go ahead and fill out all the info you wish - you can use any of the available widgets for this exercise

When done, click 'Create Widget' and copy the code provided.

Now lets go ahead and add it to our theme...

Step 1: Dashboard → Appearance → Widgets

Step 2: From the Available Widgets box, Drag and drop the text widget into your "Primary Widget Area"

Step 3: Fill in a Title of your choice.

Step 4: Paste the code that twitter provided you into the big white box. Click Save.

Like So:

Save it and you now have your twitter feeding into your sidebar!

Plugins

WordPress can only include so much functionality in the base package

When you need more functionality, plugins come to the rescue!

There is a huge community of developers that create plugins that you can install for free.

Can be as small as adding a popup photo gallery to as large as running a social network!

All Plugins live in /wp-content/plugins but we can also interface with them via the dashboard, just like themes!

You can Delete the plugins you don't want

And Activate the ones you need

Akismit is 100% required to block spammers, you must sign up for a Free account

https://akismet.com/signup/#free

A few good ones...

wp-pagenavi

Jetpack

Share This / Addthis

Subscribe To Comments

Contact Form 7

Quick Cache

Advanced custom fields

Custom Post Type UI

Anyone have a favourite?

Let's try add a social networking plugin!

Go to plugins → Add New and search for "addthis"

Find the one that is called simply 'AddThis' and click install

Finally, click Activate Plugin

The plugin will automatically add social buttons to your posts, but let's take a look at a few of the features

Exercise #7: The Final Exercise!

This is your time to shine and put everything you have learned today to work.

Step 1: From the dashbaord, edit your "Home" page. Write a few lines about yourself and upload a photo.

Step 2: Remember our page-home.php? Open it up again and delete "Coming Soon..."

Step 3: We're now going to write our own loop so we can get the page's content.

<div class="welcome">
  <?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
    
  <?php endwhile; ?>
</div>
          

Step 4: Inside the loop, we use our template tag <?php the_content(); ?> to fetch the content from our home page.

Our loop now looks like this:

<div class="welcome">
  <?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
    <?php the_content(); ?>
  <?php endwhile; ?>
</div>
          

Now that we have our Home content pulling in, lets work on our three columns.

Step 5: Right underneath <?php endwhile; ?> </div>, create an empty div with the class of homeColumn.

<div class="homeColumn"></div>

Step 6: Inside that div, insert an <h3>Column 1</h3>.

<div class="homeColumn">
  <h3>Column 1</h3>
  
</div>

Step 7: Create two more columns with the class of homeColumn. Our code should look like this:


  <div class="homeColumn">
    <h3>Column 1</h3>
  </div>

  <div class="homeColumn">
    <h3>Column 2</h3>
  </div>

  <div class="homeColumn">
    <h3>Column 3</h3>
  </div>
        

Step 8:Fill our columns with content!

This part is up to you. You can fill it with any WordPress code, text, image or external embed:

  • Twitter or facebook Widget
  • Pinterest Board
  • Youtube or vimeo embed
  • Soundcloud playlist
  • Buy now button for your product
  • Instagram Widget
  • Step 9: You're done! I've provided you with some minimal style in your style.css file in the section marked "CUSTOM HOME PAGE STYLE".

    Spend some time working on your site to make it your own. Chat with your tables and mentors to see how you can customize your theme to be totally yours!

    What else with WordPress?

    Custom Post types

    Advanced backend interfaces

    Plugin Development is an whole ‘nother world

    WordCamps and Meetups - The WordPress community is amazing

    Making WordPress Live

    Migrating WordPress, or hosting it so everyone can see it, requires a few steps to make it live.

    First, you need host. There are tons of great, affordable ones. I recommend using BlueHost.com

    Second, you will need to follow the migration guide. I've put together a video on how to do this: youtube.com/watch?v=gk6_lW9INos

    Getting Help

    http://wordpress.stackexchange.com/

    #WordPress on freenode

    WordPress forums

    The codex is the most valuable thing in the world.

    Questions? Thanks!