http://j.mp/quickWP
Starting with Twenty Twelve Theme
• Default Theme
(everyone has it)
• Responsive
• SEO friendly
• Free
• The code is well
...
Starting with TwentyTwelve
Goal: To customize the
TwentyTwelve WordPress
Theme For the Domain:
GlutenFreeGreensboro.com
ht...
Starting with TwentyTwelve
http://addons.mozilla.org/en-
US/firefox/addon/web-developer/
• Hosted WordPress
website/blog
•...
Starting with TwentyTwelve
https://filezilla-
project.org/download.php
• Hosted WordPress
website/blog
• Web Developer Add...
Starting with TwentyTwelve
http://download.cnet.com/Komodo-
Edit/3000-2212_4-139739.html
• Hosted WordPress
website/blog
•...
JetPack
http://wordpress.org/plugins/jetpack/
• Jetpack
• Woo Sidebars
• Meteor Slides
Woo Sidebars
http://woothemes.com/woosidebars/
• Jetpack
• Woo Sidebars
• Meteor Slides
Meteor Slides
http://wordpress.org/plugins/meteor-slides/
• Jetpack
• Woo Sidebars
• Meteor Slides
Make a Child Theme
http://codex.wordpress.org/Child_Themes
• Backup
Everything
You do!
Background image:
Create one, or
Download one
(Google “seamless
background image”)
Or buy one on
stock photo sites
Background image:
Tile Horizontally
Make background
white
Tile Horizontally
http://wordpress.org/support/top
ic/how-to-move-menu-below-
header-image-in-twenty-twelve-
Move the Header Up
http://wordpress.org/support/top
ic/how-to-move-menu-below-
header-image-in-twenty-twelve-
Move the Header Up
http://wordpress.org/support/top
ic/how-to-move-menu-below-
header-image-in-twenty-twelve-
Move the Header Up
Move the Header Up
http://wordpress.org/support/topic/how-to-move-
menu-below-header-image-in-twenty-twelve-theme
Google Fonts
Currently 629 Fonts
http://www.google.com/fonts/
Google Fonts
Google Fonts
Google Fonts
Editing the CSS (oh my!)
Using the Firefox Web
Developer Add-on
Editing the CSS (oh my!)
Using the Firefox Web
Developer Add-on
Editing the CSS (oh my!)
Copy content
of Styles.css
and paste it
into a html
editor.
Editing the CCC (oh my!)
Find line 697
Change
Color to
#623101
Editing the CSS (oh my!)
Find line 697
Change
Color to
#623101
Turn Off Comments on pages
Pages>
Select All>
Edit
Turn Off Comments on pages
Comments>
Do Not allow
http://glutenfreegreensboro.com/
The Result:
(still in progress)
With a few simple
modifications it
no longer looks
like t...
Quick & Dirty Wordpress Customization
Quick & Dirty Wordpress Customization
Quick & Dirty Wordpress Customization
Quick & Dirty Wordpress Customization
Quick & Dirty Wordpress Customization
Quick & Dirty Wordpress Customization
Upcoming SlideShare
Loading in …5
×

Quick & Dirty Wordpress Customization

2,304 views

Published on

WordPress has emerged as one of the most popular content management systems on the interwebs. One reason for it's popularity is its ease of use and deep support and documentation for customizations. This presentation takes a look as several easy steps to customizing the default twenty twelve WordPress theme.

Published in: Education, Technology, Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,304
On SlideShare
0
From Embeds
0
Number of Embeds
138
Actions
Shares
0
Downloads
7
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Quick & Dirty Wordpress Customization

  1. 1. http://j.mp/quickWP
  2. 2. 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
  3. 3. Starting with TwentyTwelve Goal: To customize the TwentyTwelve WordPress Theme For the Domain: GlutenFreeGreensboro.com http://wordpress.org/themes/twentytwelve
  4. 4. Starting with TwentyTwelve http://addons.mozilla.org/en- US/firefox/addon/web-developer/ • Hosted WordPress website/blog • Web Developer Add-On for Firefox (or Chrome) • FTP Client (with ftp access) • Html editor (or text editor)
  5. 5. 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)
  6. 6. 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)
  7. 7. JetPack http://wordpress.org/plugins/jetpack/ • Jetpack • Woo Sidebars • Meteor Slides
  8. 8. Woo Sidebars http://woothemes.com/woosidebars/ • Jetpack • Woo Sidebars • Meteor Slides
  9. 9. Meteor Slides http://wordpress.org/plugins/meteor-slides/ • Jetpack • Woo Sidebars • Meteor Slides
  10. 10. Make a Child Theme http://codex.wordpress.org/Child_Themes • Backup Everything You do!
  11. 11. Background image: Create one, or Download one (Google “seamless background image”) Or buy one on stock photo sites
  12. 12. Background image: Tile Horizontally Make background white
  13. 13. Tile Horizontally
  14. 14. http://wordpress.org/support/top ic/how-to-move-menu-below- header-image-in-twenty-twelve- Move the Header Up
  15. 15. http://wordpress.org/support/top ic/how-to-move-menu-below- header-image-in-twenty-twelve- Move the Header Up
  16. 16. http://wordpress.org/support/top ic/how-to-move-menu-below- header-image-in-twenty-twelve- Move the Header Up
  17. 17. Move the Header Up http://wordpress.org/support/topic/how-to-move- menu-below-header-image-in-twenty-twelve-theme
  18. 18. Google Fonts Currently 629 Fonts http://www.google.com/fonts/
  19. 19. Google Fonts
  20. 20. Google Fonts
  21. 21. Google Fonts
  22. 22. Editing the CSS (oh my!) Using the Firefox Web Developer Add-on
  23. 23. Editing the CSS (oh my!) Using the Firefox Web Developer Add-on
  24. 24. Editing the CSS (oh my!) Copy content of Styles.css and paste it into a html editor.
  25. 25. Editing the CCC (oh my!) Find line 697 Change Color to #623101
  26. 26. Editing the CSS (oh my!) Find line 697 Change Color to #623101
  27. 27. Turn Off Comments on pages Pages> Select All> Edit
  28. 28. Turn Off Comments on pages Comments> Do Not allow
  29. 29. http://glutenfreegreensboro.com/ The Result: (still in progress) With a few simple modifications it no longer looks like the same theme!

×