wordpress in 30 minutes

43
30 Minutes To Build a WordPress Site

Upload: owen-winkler

Post on 21-May-2015

2.814 views

Category:

Technology


0 download

DESCRIPTION

How to configure a server, install WordPress, customize the output, and deploy using git... All in 30 minutes. A presentation for the Philly 'Burbs WordPress Meetup.

TRANSCRIPT

Page 1: WordPress in 30 minutes

30 MinutesTo Build a WordPress Site

Page 2: WordPress in 30 minutes

What's About To Happen?Live, Unscripted Code

Provided the wifi holds up...Are you

INSANE???Oh, yes...

Page 3: WordPress in 30 minutes

The Intent of This PresentationHow One Could Construct and Deploy a WordPress Site in 30MinutesProvide Thoughts for Research, Not Detailed InstructionsGenerally: Pragmatic ideas for stepping up your game

Page 4: WordPress in 30 minutes

Who Are We?Owen Winkler

[email protected]

You!WordPress EnthusiastsGraphic/Web DesignersWordPress Implementers

Page 5: WordPress in 30 minutes

What Do We Need To Begin?Discovered RequirementsGraphic AssetsService Credentials

DNSVPS Hosting

Our Wits

Page 6: WordPress in 30 minutes

Requirements Gathering

Page 7: WordPress in 30 minutes

Requirements Mad LibsColor

Person's Name

Number (1-100)

Animal

Fruit

Page 8: WordPress in 30 minutes

RequirementsProduce a site to inform the public aboutnutrition bars for their hungry production

facilities.

Each bar will cost a mere $ and will provide atestimonial.

Someone is very fond of the color .

Page 9: WordPress in 30 minutes

Someone's Whut Bars

Page 10: WordPress in 30 minutes

Server Setup

Page 11: WordPress in 30 minutes

VPS/Cloud HostingMy Recommended Providers:

Rackspace - Digital Ocean -

Page 12: WordPress in 30 minutes

VPS/Cloud Hosting InstallationSteps

1. Choose and configure 2. Record the IP address used for the server:

3. Download and execute the

wget -q -O - http://asym.us/spinup_ubuntu1204_lnmp | bash

Page 13: WordPress in 30 minutes

DNSLocal DNSStaging DNSProduction DNS

Page 14: WordPress in 30 minutes

Local DNS

Windows 8 -

Linux & OSX -

Domain to use: wp.claire

Page 15: WordPress in 30 minutes

Production DNSGoDaddy - Stop using this!

Namecheap -

Domain to use: wp.owenw.com

IP Address:

Page 16: WordPress in 30 minutes

Host ConfigDoes have LNMP spun up?

Create a directory to house the site.mkdir -p /var/www/wp.owenw.com/htdocscd /var/www/wp.owenw.com/htdocs

Page 17: WordPress in 30 minutes

Speed Test<!DOCTYPE html><html><head> <title>Am I Fast?</title> <style type="text/css"> .fast { color: green; } .slow { color: red; font-weight: bold; } </style></head><body>

<h1>All of these should be green:</h1>

<?php function test($val) { echo $val ? '<span class="fast">&#x2713;</span>' : '<span class="slow">&#x2717;</span>'; } ?>

<dl> <dt>Using NGINX:</dt> <dd><?php test(preg_match('#nginx#', $_SERVER['SERVER_SOFTWARE'])); ?></dd> <dt>Using PHP as FastCGI:</dt> <dd><?php test(preg_match('#fcgi#', php_sapi_name())); ?></dd> <dt>Using PHP-FPM:</dt> <dd><?php test(preg_match('#fpm#', php_sapi_name())); ?></dd> <dt>Enabled APC:</dt> <dd><?php test(function_exists('apc_cache_info') && @apc_cache_info('opcode')); ?></dd> <dt>Enabled MySQL QCache:</dt> <dd><?php$conn = new mysqli('localhost', 'root', '');$qry = $conn->query("show variables like 'query_cache_size'"); test(intval($qry->fetch_object()->Value) > 0); ?></dd>

</body></html>

Page 18: WordPress in 30 minutes

Where's the WordPress in thisWordPress presentation?

Page 19: WordPress in 30 minutes

Configure the Local WordPressEnvironment

1. Setup local DNS2. Setup local web root3. Setup local database4. Setup version control with a copy of WordPress5. Set up a simple theme

Page 20: WordPress in 30 minutes

Local Web Root & DatabaseLocal Web Root will be different for everyone

mkdir -p /c/xampp/htdocs/vdr/wp.clairecd /c/xampp/htdocs/vdr/wp.claire

Database is generally the same for everyone

mysql -urootcreate database wp;

Page 21: WordPress in 30 minutes

Setup Version ControlUsing git and GitHub!

1. on GitHub for your site named "wp"2. and extract WordPress to your local environment3. Initialize the repo with the WordPress files4. Push the files from your local environment to the newly

created repo at GitHub

curl http://wordpress.org/latest.tar.gz | tar xvzmv wordpress htdocs; cd htdocsgit initgit add .git commit -m "Added WordPress to start"git remote add origin [email protected]:ringmaster/wp.gitgit push -u origin master

Page 22: WordPress in 30 minutes

Set up a Simple ThemeLet's build a child theme of twentytwelve!

/*Theme Name: Someone's Whut BarsTheme URI: http://redalt.com/Description: A theme for the Someone's Whut Bars site, built as a child of twentytwelveAuthor: Owen WinklerAuthor URI: http://owen.com/Template: twentytwelveVersion: 1.0*/@import url("../twentytwelve/style.css");

If not, then maybe use ...

Page 23: WordPress in 30 minutes

Customization

Page 24: WordPress in 30 minutes

Static Home PageOur product site is not primarily a blog

Settings » Reading » Front page displays

Page 25: WordPress in 30 minutes

Main MenuMenus are easy and effective

Create pages as targetsCreate a menuAdd the pages to the menu

Page 26: WordPress in 30 minutes

Color AccentDon't forget that Someone really likes the color .

html body.custom-background { background-color: #004488;}h1, h1 a, .site-header h1 a { color: #004488;}

Appearance » Background can set the background color, but...

Page 27: WordPress in 30 minutes

What's this "Word Press" thing?Let's remove the WordPress credit from the footer.

Copy the existing footer.php from twentytwelve into our customwp theme.

Page 28: WordPress in 30 minutes

Kill CommentsWe don't want comments on our modern product blog

Override the comments.php template with a blank file!

Page 29: WordPress in 30 minutes

Custom Product TypeLet's create a to use in a sidebar product

listing

add_action( 'init', 'create_product_type' );function create_product_type() { register_post_type( 'wp_product', array( 'labels' => array( 'name' => __( 'Products' ), 'singular_name' => __( 'Product' ) ), 'public' => true, 'has_archive' => false, 'rewrite' => array('slug' => 'products'), ) );}

Page 30: WordPress in 30 minutes

Things to KnowThis can go in functions.php or a new pluginThe custom type can have its own template:single-{typename}.php

Page 31: WordPress in 30 minutes

Product WidgetLet's to automatically list items from our

custom product post type

class Products_Widget extends WP_Widget { function __construct() { parent::__construct( 'Products_Widget', 'Products Widget', array( 'description' => 'Displays a listing of Products', ) ); } public function widget( $args, $instance ) { $args = array( 'post_type' => 'wp_product', 'posts_per_page' => 10 ); $loop = new WP_Query( $args ); echo '

Our Products'; while ( $loop->have_posts() ) : $loop->the_post(); the_title(); echo ''; the_content(); echo ''; endwhile; echo '';

Page 32: WordPress in 30 minutes

Why not use plugins?Two answers:

1. Go ahead!2. More plugins equals more weight, maintenance, and

deployment complication.

Page 33: WordPress in 30 minutes

Deployment

Page 34: WordPress in 30 minutes

Deploy FilesStep 1 - Prepare

Make sure everything necessary is in git and pushed to github:

git statusgit commit -am "Update everything."git push origin master

The wp-config.php file?

Page 35: WordPress in 30 minutes

Deploy FilesStep 2 - "Upload"

Instead of using SFTP to upload files,we'll use git to download them directly to the server

cd /var/www/wp.owenw.comgit clone https://github.com/ringmaster/wp.git htdocs

Page 36: WordPress in 30 minutes

Deploy DatabaseStep 1 - Prepare

Database transfer is complicated... Let's use the plugin.

cd /c/xampp/htdocs/vdr/wp.claire/htdocs/wp-content/uploadsscp wp-migrate-....sql [email protected]:/var/www/wp

Page 37: WordPress in 30 minutes

Deploy DatabaseStep 2 - Restore

This process overwrites all of the database data on the servermysql -uroot wp < wp-migrate-....sql

Page 38: WordPress in 30 minutes

The Nuts

Page 39: WordPress in 30 minutes

Missed Some WordPressThings

BackupUsersSEOPlugins and must-use plugins

Page 40: WordPress in 30 minutes

Missed Some ConfigurationThings

wp-config.php on dev/staging/localCaching Reverse-Proxy? Varnish?Wait, where's the .htaccess?

Page 41: WordPress in 30 minutes

Missed Some DeploymentThings

Automated deployment. See: capistranoHow are updates to code/core handled?How are updates from production handled?How are user uploads handled?What happens when something goes wrong?

Page 42: WordPress in 30 minutes

Missed Some Security ThingsWhat's with all the "root" access?MySQL users don't have passwords?Where are your firewall rules?

Page 43: WordPress in 30 minutes

The End