Building Websites With WordPress

Building Websites With WordPress

Released January 2012
Publisher(s): Infinite Skills
ISBN: 9781926873831

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Video description

In recent years, WordPress has become more than just a platform for expressing your personal thoughts in the form of a blog. WordPress has become a fully featured content management system that you can utilize to build complete and functional websites. In this computer based WordPress training course, expert designer, trainer and author Geoff Blake teaches you how to build a seamless, professional website using WP as the hosting platform. Not intended for the faint of heart, this video training course focuses on the process and details of building a website with WordPress from scratch. Geoff starts with wireframing in Illustrator and continues to slicing your design apart in Photoshop. Once you have a final design, you will learn how to install and setup WordPress on your local computer. From there, you will learn step by step, how to modify the default WordPress template CSS and file structure to suit your own design, one element at a time. You will learn about "The Loop", and how to use it on your homepage. You will create pages, and use plugins for a calendar and slideshow. Finally, you will learn how to take your design, and put it online for everyone to see. By the conclusion of this video training course on Designing Websites With WordPress, you will be fully capable of customizing WordPress to build your own, fully functional websites. This video tutorial comes complete with working files so that you can create a website alongside the author with the same files he uses.

Table of contents

  1. Site Planning And Wireframing
    1. What You Will Learn 00:03:45
    2. The Workflow Process 00:03:02
    3. Setting Up Illustrator For Web Layout 00:04:36
    4. Getting Started With Wire Framing 00:06:48
    5. Making The Layout Precise With Transform And Align 00:07:35
    6. Setting Up Layout Guides 00:05:32
    7. Wireframing Additional Layout Objects 00:05:44
    8. Finishing Up The Wireframe - Part 1 00:07:33
    9. Finishing Up The Wireframe - Part 2 00:03:17
  2. From Wireframe To Design
    1. Choosing Fonts 00:04:56
    2. Choosing Colors 00:07:45
    3. Creating The Site Logo 00:07:05
    4. Scaling And Positioning The Logo 00:03:33
    5. Creating A Brush Effect 00:07:08
    6. Building Out The Design Further 00:06:02
    7. Pushing The Design Further 00:04:51
    8. Using Yahoo! Design Elements 00:05:41
  3. Moving The Design To Photoshop
    1. Getting The Design Into Photoshop 00:06:55
    2. Adjusting The Canvas Size 00:03:50
    3. Introducing Smart Objects 00:05:44
    4. Breaking Apart The Layout - Part 1 00:06:19
    5. Breaking Apart The Layout - Part 2 00:05:58
    6. Breaking Apart The Rest Of The Layout 00:04:35
    7. Organizing The Layers Panel 00:05:31
    8. Building Out The Header 00:04:15
    9. Inserting The Header Texture And A Clipping Group 00:07:25
    10. Inserting Photographs - Part 1 00:05:05
    11. Inserting Photographs - Part 2 00:06:13
    12. Building The Center Section 00:08:20
    13. Finalizing The Layout 00:05:00
  4. Installing WordPress Locally On The PC And Mac
    1. Downloading WordPress 00:02:50
    2. Downloading XAMPP For PC 00:02:52
    3. Starting Up XAMPP And Creating The MySQL Database 00:04:53
    4. Installing WordPress On The PC 00:06:18
    5. Downloading MAMP For Mac 00:02:13
    6. Pointing MAMP To WordPress 00:03:46
    7. Creating The Database And Installing WordPress On The Mac 00:07:21
  5. Getting WordPress Set Up
    1. Viewing And Touring The Admin Console 00:04:01
    2. Viewing The WordPress Front And Backend 00:03:17
    3. WordPress Main Areas 00:05:00
    4. Permalink Option Settings 00:04:00
    5. Changing The Sites Theme 00:04:23
  6. Building A Custom WordPress Theme
    1. Viewing The Template Files And A Note About Text Editors 00:05:31
    2. Defining The Main Layout Components - Part 1 00:06:26
    3. Defining The Main Layout Components - Part 2 00:05:01
    4. Adjusting The Layout Width 00:04:52
    5. Starting The Sites Header 00:06:01
    6. Slicing The Layout's Header Graphic 00:07:07
    7. Saving The Header Background 00:05:16
    8. Correcting The File Structure 00:02:49
    9. Inserting The Header Graphic Into The CSS 00:05:04
    10. Extracting The Logo From The Photoshop Layout 00:05:21
    11. Inserting The Logo And Making Code Adjustments 00:07:58
    12. Resizing The Logo 00:03:12
    13. Roughing In The Slidshow - Part 1 00:06:33
    14. Roughing In The Slidshow - Part 2 00:05:45
  7. Building The Site's News Feed
    1. Understanding How Posts And The Loop Works 00:06:21
    2. Writing And Publishing Posts 00:05:04
    3. Setting A Featured Image Post Thumbnail - Part 1 00:05:27
    4. Setting A Featured Image Post Thumbnail - Part 2 00:06:52
    5. Inserting The More Tag 00:02:48
    6. Creating Additional Test Posts 00:02:55
    7. Setting The Blog Loop Background Graphic 00:07:30
    8. Controlling Background Tiling 00:04:13
    9. Adding The Blog Loop Title 00:03:27
    10. Customizing How Posts Display - Part 1 00:02:41
    11. Customizing How Posts Display - Part 2 00:03:50
    12. Finalizing The Blog Loop 00:02:33
  8. Building The Site Pages And Main Menu
    1. Understanding Pages Versus Posts 00:03:13
    2. Publishing Pages And Updating The Menu 00:04:12
    3. Creating Additional Test Pages 00:03:21
    4. Controlling The Order Of Menu Items 00:05:02
    5. Finishing Up The Menu 00:02:05
  9. Building The Layout's Center Section
    1. Saving The Graphic For The Center Section 00:05:25
    2. Coding The Center Section 00:06:07
    3. Applying The Background Texture 00:04:48
    4. Extracting The Center Section Graphics 00:05:04
    5. Coding The Center Graphics 00:03:52
    6. Final Center Box Adjustments 00:05:52
    7. Setting Center Box Hyperlinks 00:03:03
  10. Building An Automated Slideshow
    1. Downloading And Installing The Gallery Plugin 00:04:01
    2. Inserting The Gallery Code 00:02:32
    3. Creating The Slideshow Graphics 00:05:22
    4. Building The Slide Posts 00:06:04
    5. Configuring The Slideshow 00:04:49
    6. Removing The Gallery Posts From The Loop 00:04:07
  11. Building The Sidebar And Footer
    1. Saving Out The Sidebar Background 00:03:02
    2. Adjusting The Sidebar CSS 00:05:06
    3. Previewing The WordPress Default Calendar 00:04:08
    4. Downloading And Installing An Events Calendar 00:03:06
    5. Adding An Event To The Calendar 00:03:12
    6. Customizing The Calendars CSS 00:07:43
    7. Installing The Photo Gallery Widget 00:03:18
    8. Configuring The Photo Gallery Widget 00:03:17
    9. Adjusting The Thumbnail Size 00:03:12
    10. Creating The Thumbnail Posts 00:04:21
    11. Restricting The Gallery Posts 00:03:30
    12. Adjusting The Blog Loop And Gallery CSS 00:06:16
    13. Inserting The Newsletter Graphic 00:06:03
    14. Building The Layout's Footer - Part 1 00:07:21
    15. Building The Layout's Footer - Part 2 00:04:20
    16. Setting The Graphics In The Footer 00:01:51
    17. Finalizing The Footer Content 00:06:11
  12. Uploading To A Live Web Server
    1. Exporting The Local Database 00:03:01
    2. Preparing The Database For Uploading 00:03:25
    3. Creating The Live Database 00:02:15
    4. Adding A Database User 00:02:10
    5. Importing The Local Database 00:02:06
    6. Updating the PHP and CSS Files 00:04:08
    7. Updating The Configuration File 00:01:59
    8. Uploading The Sites Files 00:02:12
    9. Viewing The Live Site And Final Tweaks 00:02:29
    10. Wrapping Up 00:01:38
  13. About The Author
    1. Learn About Me 00:01:25

Product information

  • Title: Building Websites With WordPress
  • Author(s):
  • Release date: January 2012
  • Publisher(s): Infinite Skills
  • ISBN: 9781926873831