Wordpress for Web Development

While Mark Hannon was a designer by trade he adapted with the times now uses WordPress as a part of his design tool belt.

Mark Hannon shows you how Wordpress can help you create seamless and easily customize able web pages. 

In this video we will install MAMP. create a database, and install Wordpress

The Wordpress core files and wp-content directory are explained by Mark in this lecture

Theme anatomy and creating a simple, custom theme.

In this video Mark goes over how to use built in functions to create dynamic headers and footers for your Wordpress site

This first exercise will help to reinforce the structure of the wp-content field

Great job! but this is only the beginning i will see you in the next section where we will create more custom headers and footers.

Let's keep working on your basic theme and so that you can add some custom elements to the page. You will create menus, sidebars, widgets and a custom thumbnail! This is going to give you a great foundation with the Wordpress platform.

In this video Mark shows you how to add the Wordpress loop to your index.php template file.

In this video, you will learn how to create menus with Mark!

Register sidebars in functions.php and add them to your theme

Change the page layout and make some changes to the header/sidebar.

In this video Mark will show you how to create a custom theme thumbnail for your page

In this exercise you will add a screenshot to make the theme yours

The theme has most of it's parts but we can add more 

We have a barebones template for our theme but in this section we are going to develop that some more and create a 404 page just in case our website is down.

If the link is bad or content isn't found let your visitors know by adding a 404 page to your site.

In this video Mark will show you how to use "wp_query()" to create a category page for your posts.

In this video you will learn how to create a basic search for template for your web page in order to aid in navigation 

In this video we will go over how Custom posts work and how you can use them to display specialized content.

Now that you have created your custom post type it's time to show that off to the world 

In this exercise, you will create your own custom post type to display something you are interested in.

You can extend Wordpress even without Plugins

The theme is nothing much to look at but we are going to change that in short order.

We are going to go over how to add logos and background images to your web pages

Adding the posts' featured image to the proper template files

Add some customization to your page with the customize section

Custom fields can store values in variables to modify the theme

Create some custom design specific CSS files and En queue  them

Custom Fields can store values in variables to modify the theme 

Having more control over your dashboard makes designing your website that much easier

In this section Mark with introduce you to media queries

HTML5's tag to fit the content to any sized screen

Mark goes over why it is essential to mobile friendly in todays world of webpages

Mark will go over installing Bootstrap and applying CSS rules to your website

In this video you will go over how to add rows and columns to your page

Use google fonts to set the headlines and other text

In this exercise you will learn how to apply styles to your website

This will help you with child themes in the next section

Easier and Smarter ways to create a theme

Parent theme: easy to understand and to be well documented.

Some themes have pre-built child themes. If not, make your own

A theme folder with "style.css" and "functions.php."

Adding the necessary code to styles.css and functions.php

Create a custom theme thumbnail and write some custom CSS

Lab: write some of your own CSS rules to make your theme "You."

In the next section, we will hack some of the parent's templates

Time to start hacking the parent theme's template files

Study how the parent theme developer built their theme

Copy and paste the necessary files & folders we will need

Add our own features to the header, replace the copyright in footer

Create a custom page template and insert a custom field

Copy these page templates if you want to create custom templates

Create your own page templates with custom headers & footers

The parent theme is just a framework 

Widgets can go anywhere on your website, including in a page

First we start creating our first Widget page

Use the browser's dev tools to identify WP-created stles

Decide between the WP's Customize styles or "style.css"

Be careful your styles don't interfere with the responsive behavior

Write some CSS to make your child theme different from the parent

Child themes are changeable to where the parent is unrecognizable

Working With Images and Color

Use your own image sizes to override the parent theme's defaults

Make WP use 100% quality in all sized images

Wordpress built-in classes for featured images

Create a custom palette of most-used colors in the visual editor

Make a custom image size for the featured image and style it

With some creative hacking, Wordpress bends to your will

Time to get online!

Extend the parent themes sidebar function to add your own

Use a widget embedded in a page to display posts

Not as powerful as on posts but you can set it up

Set the copyright line in the footer to whatever you want

All of the steps and setup needed to move the WordPress Website to a live server

Ready to go live? Move your website to the live server

Build from scratch or child themes. Always good to have options