Transcript
Page 1: Quick & Dirty Wordpress Customization

http://j.mp/quickWP

Page 2: Quick & Dirty Wordpress Customization
Page 3: Quick & Dirty Wordpress Customization

Starting with Twenty Twelve Theme• Default Theme

(everyone has it)• Responsive• SEO friendly• Free• The code is well

documented• Good Starting

point

http://wordpress.org/themes/twentytwelve

Page 4: Quick & Dirty Wordpress Customization

Starting with TwentyTwelve

Goal: To customize the TwentyTwelve WordPress Theme For the Domain: GlutenFreeGreensboro.com

http://wordpress.org/themes/twentytwelve

Page 5: Quick & Dirty Wordpress Customization

Starting with TwentyTwelve

http://addons.mozilla.org/en-US/firefox/addon/web-developer/

• Hosted WordPress website/blog

• Web DeveloperAdd-On for Firefox (or Chrome)

• FTP Client (with ftp access)• Html editor (or text editor)

Page 6: Quick & Dirty Wordpress Customization

Starting with TwentyTwelve

https://filezilla-project.org/download.php

• Hosted WordPress website/blog

• Web Developer Add-On for Firefox (or Chrome)

• FTP Client (with ftp access)• Html editor (or text editor)

Page 7: Quick & Dirty Wordpress Customization

Starting with TwentyTwelve

http://download.cnet.com/Komodo-Edit/3000-2212_4-139739.html

• Hosted WordPress website/blog

• Web Developer Add-On for Firefox (or Chrome)

• FTP Client (with ftp access)• html editor (or text editor)

Page 8: Quick & Dirty Wordpress Customization

JetPack

http://wordpress.org/plugins/jetpack/

• Jetpack• Woo Sidebars• Meteor Slides

Page 9: Quick & Dirty Wordpress Customization

Woo Sidebars

http://woothemes.com/woosidebars/

• Jetpack• Woo Sidebars• Meteor Slides

Page 10: Quick & Dirty Wordpress Customization

Meteor Slides

http://wordpress.org/plugins/meteor-slides/

• Jetpack• Woo Sidebars• Meteor Slides

Page 11: Quick & Dirty Wordpress Customization
Page 12: Quick & Dirty Wordpress Customization

Make a Child Theme

http://codex.wordpress.org/Child_Themes

• Backup Everything You do!

Page 13: Quick & Dirty Wordpress Customization

Background image:Create one, orDownload one

(Google “seamless background image”)

Or buy one onstock photo sites

Page 14: Quick & Dirty Wordpress Customization

Background image:Tile Horizontally

Make background white

Page 15: Quick & Dirty Wordpress Customization

Tile Horizontally

Page 16: Quick & Dirty Wordpress Customization
Page 17: Quick & Dirty Wordpress Customization
Page 18: Quick & Dirty Wordpress Customization
Page 19: Quick & Dirty Wordpress Customization

http://wordpress.org/support/topic/how-to-move-menu-below-header-image-in-twenty-twelve-

theme?replies=3

Move the Header Up

Page 20: Quick & Dirty Wordpress Customization

http://wordpress.org/support/topic/how-to-move-menu-below-header-image-in-twenty-twelve-

theme?replies=3

Move the Header Up

Page 21: Quick & Dirty Wordpress Customization

http://wordpress.org/support/topic/how-to-move-menu-below-header-image-in-twenty-twelve-

theme?replies=3

Move the Header Up

Page 22: Quick & Dirty Wordpress Customization

Move the Header Up

http://wordpress.org/support/topic/how-to-move-menu-below-header-image-in-twenty-twelve-theme

Page 23: Quick & Dirty Wordpress Customization

Google Fonts

Currently 629 Fontshttp://www.google.com/fonts/

Page 24: Quick & Dirty Wordpress Customization

Google Fonts

Page 25: Quick & Dirty Wordpress Customization

Google Fonts

Page 26: Quick & Dirty Wordpress Customization

Google Fonts

Page 27: Quick & Dirty Wordpress Customization

Editing the CSS (oh my!)

Using the Firefox Web Developer Add-on

Page 28: Quick & Dirty Wordpress Customization

Editing the CSS (oh my!)

Using the Firefox Web Developer Add-on

Page 29: Quick & Dirty Wordpress Customization

Editing the CSS (oh my!)

Copy content of Styles.css and paste it into a html

editor.

Page 30: Quick & Dirty Wordpress Customization

Editing the CCC (oh my!)

Find line 697ChangeColor to#623101

Page 31: Quick & Dirty Wordpress Customization

Editing the CSS (oh my!)

Find line 697ChangeColor to#623101

Page 32: Quick & Dirty Wordpress Customization

Turn Off Comments on pages

Pages> Select All>

Edit

Page 33: Quick & Dirty Wordpress Customization

Turn Off Comments on pages

Comments>Do Not allow

Page 34: Quick & Dirty Wordpress Customization

http://glutenfreegreensboro.com/

The Result: (still in progress)

With a few simple modifications it no longer looks like the same theme!

Page 35: Quick & Dirty Wordpress Customization

Recommended