Tessa Blakeley Silver, Rachel McCollin - WordPress Theme Development Beginner's Guide, Third Edition

Скачать

Tessa Blakeley Silver, Rachel McCollin - WordPress Theme Development Beginner's Guide, Third Edition

WordPress Theme Development Beginner's Guide, Third Edition

Год: 2013

Автор: Tessa Blakeley Silver, Rachel McCollin

Издательство: Packt Publishing

ISBN: 1849514224

Язык: Английский

Формат: FB2

Качество: Изначально компьютерное (eBook)

Количество страниц: 252

Описание: In Detail

If you’ve been using WordPress to build websites for yourself or clients, you’ve probably reached a point where you need to build your own theme. Being able to build your own themes means you can build beautiful, bespoke websites using WordPress and means you’re not limited to the themes you can download.

WordPress Theme Development Beginner’s Guide will take you through the process of building your first WordPress theme. It will show you how to write the HTML and CSS your theme will be based on, then convert that code to PHP for use in WordPress. Once you’ve done that you’ll learn how to add more features to your theme and make it responsive, accessible and SEO-friendly.

Start by designing your theme using HTML and CSS, then work through the steps to turn this into a fully functioning WordPress theme, including creating template files, adding template tags and PHP to display content, and giving your theme extra goodies like menus, widget areas and more.

Create a gorgeous, responsive and standards-compliant design for your theme using HTML5 and CSS3. Take your HTML and use it to create PHP template files using the WordPress template hierarchy, then add in template tags and the loop to display pages and posts in your theme. Add widget areas, menus and featured images. Learn how to debug your theme and validate it, ensuring it’s standards-compliant and accessible. Find out what steps you need to take to release your theme to the public, and finally learn some extra tips and tricks such as how to enhance your theme for SEO and how to add support for the WordPress theme customizer.

At the end of WordPress Theme Development Beginner’s Guide you’ll have the skills you need to build quality WordPress themes using your own designs. Working through a straightforward worked example, you’ll learn the steps you need to follow to create a theme from scratch.

Approach

A Beginner's Guide packed with clear step-by-step instructions to create powerful and professional themes for your WordPress website

Who this book is for

If you’ve used WordPress to create self-hosted websites using themes you’ve downloaded but want to start building your own, this book is for you. You will need an understanding of how to use WordPress and some understanding of HTML and CSS. Simple PHP will be included in the book but you don’t need any prior PHP knowledge or experience – it will all be explained for you.

P.S. Со слоганом - меньше теории, больше практики - это они погорячились. Теории маловато и практики тоже. Совершенно простые вещи в виде вкрячивания сайдбара и хидера описаны, но глубже ничего не будет. Например, там совершенно нет информации как удалить стандартные виджеты, которые образовались при вставке своего сайдбара. Так, что новичкам совсем читать можно, но лучше в этот момент штудировать кодекс

WordPress Theme Development Beginner's Guide Third Edition Table of Contents

1. Getting Started as a WordPress Theme Designer

Overview of WordPress perks

Does a WordPress site have to be a blog ?

Pick a theme or design of your own

Drawbacks of using an off-the-shelf theme

What about premium themes and frameworks?

What exactly is a premium theme

What is a framework theme

Core technology you should understand

WordPress

CSS

HTML

PHP

Other helpful technologies

Tools of the trade

HTML editor

Graphics editor

Web browser

Basics of a WordPress theme

The template hierarchy

The Loop

Template tags and API hooks

Our development strategies

Fonts and typefaces

A CSS strategy – font sizing with ems

A CSS strategy – working with a CSS framework

960

Blueprint

Layoutcore

Setting up your WordPress sandbox

Using WAMP

Using MAMP

Choosing a hosting provider

Rolling out WordPress

Summary

2. Preparing a Design for Our WordPress Theme

Getting ready to design

Designing in the browser

Starting our design

Planning and sketching our design

Time for action – planning our design

What just happened?

Creating your design – from the sketch to the screen

Time for action – creating our static HTML file

What just happened?

The semantic body

Time for action – adding in basic HTML structure

What just happened?

Time for action – adding in the semantic structure

What just happened?

Attaching our CSS stylesheet

Time for action – creating and including a style.css shell into your index.php page

What just happened?

Prepping for responsiveness – viewport and apple-mobile meta tags

Time for action – adding in the viewport and apple-mobile meta tags

What just happened?

Adding in content

Starting with the text

Time for action – adding sample text to our semantic sections

What just happened?

Styling our fonts

Styling font families

Time for Action – assigning your font families

What just happened?

@font-face techniques

Styling font sizes

Time for action – sizing your fonts

What just happened?

Time for action – handling search engine bots/screen reader text

What just happened?

Setting up our layout with CSS

Time for action – referencing our layout core to set up our positions

What just happened?

Time for Action – Adding our media queries

What just happened?

Setting up the desktop view

Time for action – standard settings

What just happened?

Time for action – checking in on larger desktops

What just happened?

Time for action – making sure smaller screens are handled

What just happened?

Setting up the tablet view

Time for action – adjusting the standard layout for tablets

What just happened?

Setting up the small screen view

Time for action – setting up our small screen layout

What just happened?

Adding design treatments

Time for action – setting up our graphic treatments in the stylesheet

What just happened?

Adding graphics and background images

Setting up our background images in our stylesheet

Time for action – adding background images to our design

What just happened?

Time for action – adding background image styling to the media queries

What just happened?

Don't forget the favicon and touch icon

Adding a favicon

Time for action – adding the favicon you just created

What just happened?

Have a go hero – making your favicon high-resolution

Touch icons

Time for action – adding a touch icon

What just happened?

Pop quiz – questions about theme design

Summary

3. Coding it Up

WordPress theme basics

The Template hierarchy

Why the Template hierarchy works the way it does

The WordPress theme API

Setting up your WordPress workflow

Building your WordPress theme template files

Starting with a blank slate

Creating a new theme directory

Time for action – setting up our theme directory

What just happened?

happened?

Including WordPress content

Time for action – getting your CSS styles to show up

What just happened?

Understanding WordPress template tags and hooks

Template tags

Hooks

Looping it! – The WordPress Loop

The Loop in a nutshell – how it works

Time for action – creating a basic Loop

What just happened?

Time for action – adding content

What just happened?

Time for action – adding metadata, the timestamp, and author template tags

What just happened?

Keeping up-to-date with WordPress

Adding to the Loop

Time for action – displaying the number of comments

What just happened?

Time for action – adding in autogenerated classes

What just happened?

One last look – our full loop

Breaking the code up into template files

Including everyone

Creating a header file

Time for action – creating the header.php file

What just happened?

Separating out our sidebar

Time for action – creating the sidebar.php file

What just happened?

Finishing off with the footer

Time for action – creating the footer.php template file

What just happened

Time for action – don't forget the plugin hooks

What just happened

Creating a template file for static pages

Time for action – creating a custom page.php template file

What just happened?

Pop Quiz – questions about WordPress theme structure

Summary

4. Advanced Theme Features

Site settings

Time for action – configuring your site settings

What just happened?

Time for action – adding the site title and description to your theme

What just happened?

Pretty permalinks

Time for action – setting up pretty permalinks

What just happened?

Permalinks – a quick guide

Menus

Registering navigation menus

Time for action – registering a navigation menu

What just happened?

Time for action – adding menus to our theme's header.php file

What just happened?

Setting up our menu

Defining our Reading settings

Time for action – defining Reading settings

What just happened?

Creating a menu

Time for action – creating a new WordPress menu

What just happened?

Adding pages and other content to our menu

Time for action – adding pages to a menu

What just happened?

Time for action – adding a custom link to the menu

What just happened?

Time for action – adding a category link to the menu

What just happened?

The WordPress Menus admin – the possibilities

Widgets

Registering sidebars or widget areas

Time for action – registering sidebars in functions.php

What just happened?

Time for action – adding widget areas to sidebar.php

What just happened?

Time for action –adding widget areas to footer.php

What just happened?

Widget areas – not just for the sidebar and footer

Adding widgets in the Widgets admin screen

What widgets will we need

Time for action – adding sidebar widgets

What just happened?

Time for action – adding footer widgets

What just happened?

Featured images

Time for action – adding featured images to our theme

What just happened?

Time for action – adding featured images to the site

What just happened?

Time for action – displaying featured images differently in different template files

What just happened?

Parent and child themes

Pop Quiz – understanding advanced theme features

Summary

5. Debugging and Validation

Debugging and validation workflow

Browser tools for debugging

Firefox

The Web Developer toolbar

Firebug

Google Chrome

Safari

Validation

Validating HTML

Time for action – validating your HTML

What just happened?

Time for action – finding and fixing errors

What just happened?

Time for action – fixing our code

What just happened?

Validating CSS

Time for action – using the W3C's CSS validator

What just happened?

Testing on multiple browsers and platforms

Which browsers to support

Approaches to browser support

Graceful degradation

Progressive enhancement

Troubleshooting basics

PHP template tags

CSS quick fixes

Fixing CSS across browsers

Common browser problems

Adding an IE-specific stylesheet

Time for action – setting up an alternative IE stylesheet

What just happened?

Checking your work in Internet Explorer

Time for action – testing our theme with BrowserLab

What just happened?

Testing on mobile devices

Summary

6. Your Theme in Action

The WordPress Theme Review guidelines

The theme preview screenshot

Time for action – snagging a thumbnail of your theme

What just happened?

Packaging your theme up

Tidying up your theme

Time for action – tidying up your theme

What just happened?

Describing your theme in the stylesheet

Time for action – describing your theme

What just happened?

Your theme's license

Time for action – adding license information to our theme

What just happened?

Zipping up your theme

Time for action – zipping up your theme

What just happened?

One last test

Time for action – testing the theme

What just happened?

Have a go hero – using the WordPress Theme Unit Test

Pop Quiz - questions on packaging up your theme

Summary

7. Tips and tricks

Adding more template files to your theme

A search.php file for search results

Time for action – creating a search.php template file

What just happened?

Creating a custom page template

Time for action – creating a custom page template

What just happened?

Time for action – assigning a custom page template to a page in our site

What just happened?

Have a go hero – styling the custom page template

Working with conditional tags

Conditional tags' syntax

Incorporating conditional tags in our theme

Using conditional tags to hide the home page's title

Time for action – using CSS to hide our home page's title

What just happened?

Time for action – using a conditional tag to hide our home page's title

What just happened?

Have a go hero – other ways of showing conditional content

The Theme Customizer

Time for action - adding the Theme Customizer to our theme

What just happened?

Time for action – adding some more options to the Theme Customizer

What just happened?

Time for action – ensuring Theme Customizer changes are carried through to the CSS

What just happened?

Theme Customizer – the possibilities

Have a go hero – adding a theme options screen

Search engine optimization

SEO checklist

Clean, valid, standards-compliant code

Semantic HTML5

Making your theme run faster

Search-engine optimized permalinks

Optimizing images and links with alt and title attributes

Time for action – optimizing a logo for SEO

What just happened?

Using optimized meta tags – page titles and descriptions

Time for action – optimizing our theme's page meta tags

What just happened?

Summary

Pop Quiz Answers

Chapter 2, Preparing a Design for Our WordPress Theme

Pop quiz – questions about theme design

Chapter 3, Coding it Up

Pop quiz – questions about WordPress theme structure

Chapter 4, Advanced Theme Features

Pop quiz – understanding advanced theme features

Chapter 6, Your Theme in Action

Pop quiz – questions on packaging up your theme

Index

Скачать