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 and many more...

localhost - / Local Server (MAMP or WAMP) - A small service that runs on your laptop which mimics the functionality of a large, paid server (like GoDaddy). 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 backend 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 ping to the database that asks for certain posts based on several supplied parameters.

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.

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

Step 2: Move that Folder over to your localhost.

If you need help findind 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

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

Step 5: Set the below.

Windows Users: Leave password blank.

Step 6: Surf to http://localhost/wordpress or http://localhost:8888/wordpress in Chrome and install!

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!

Dashboard → Appearance → Themes → Install Themes Tab

We can Search and install right from this interface!

Let's get comfortable with the basic building blocks of our theme. We're going to edit header.php, 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!

Placing an image in the header.

Step 1: Open header.php and find the line that looks like this:

 <h1><a href="<?php echo home_url( '/' ); ?>">
          <?php bloginfo( 'name' ); ?></a></h1> 

Delete it!

Now we're going to do two things: 1. Create a link, 2. Put an image inside that link.

Open sidebar.php and look for these comments:

We're going to use the same image code as we used in the header. Our file is called portrait.png

<img src='<?php bloginfo('template_directory'); ?>/i/portrait.png' />

Underneath, write a little something about yourself. Wrap it in <p> and </p> tags.

<p>Welcome to my blog, I'm really into learning how to code!</p>

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

Take it one step further and add an image into the background

background: #fff url(i/background.png);

We don't need underlines on the sidebar links.

With CSS we can target only the links in the sidebar and specify no underline

Scroll down in your style.css and find the Sidebar Section

Apply a new style to .sidebar a like so:

          .sidebar a {
            border-bottom:0;
          }
          

If you like, go crazy adding more styles to your sidebar links.

For this, we use the CSS pseudo selector, :hover

Our regular selector looks like this

.menu ul li a {...}

So our hover selector looks like this

.menu ul li a:hover {...}

Lets add a #BADA55 background

.menu ul li a:hover { background: #BADA55;}

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.

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

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?

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(); ?>

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!

Remember <?php the_post_thumbnail(); ?> Place it just above our <?php the_content(); ?> template tag

Sometimes we dont 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 tempaltes that are similar to page.php and assign them to various pages

We're going to create two custom page templates

The first one will be a simple page without a sidebar for 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-contact.php

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

<?php /* Template Name: Contact Page */ ?>

Step 3: We don't want a sidebar for this page, so go ahead and delete <?php get_sidebar(); ?>. Save.

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.

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.

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

Step 4: Inside the loop, we will put a div with the class of homeBlurb and use our template tag <?php the_content(); ?> to fetch the content from our home page.

Our loop now looks like this:

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

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

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

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

Step 6: Inside that div, insert an <h3>Tag Cloud</h3> along with our template tag <?php wp_tag_cloud(); ?>

<div class="homeColumn">
  <h3>Tag Cloud</h3>
  <?php wp_tag_cloud(); ?>
</div>