Embed Size (px)
DESCRIPTION
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.
Citation preview
http://j.mp/quickWP
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
Starting with TwentyTwelve
Goal: To customize the TwentyTwelve WordPress Theme For the Domain: GlutenFreeGreensboro.com
http://wordpress.org/themes/twentytwelve
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)
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)
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)
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, orDownload one
(Google “seamless background image”)
Or buy one onstock photo sites
Background image:Tile Horizontally
Make background white
Tile Horizontally
http://wordpress.org/support/topic/how-to-move-menu-below-header-image-in-twenty-twelve-
theme?replies=3
Move the Header Up
http://wordpress.org/support/topic/how-to-move-menu-below-header-image-in-twenty-twelve-
theme?replies=3
Move the Header Up
http://wordpress.org/support/topic/how-to-move-menu-below-header-image-in-twenty-twelve-
theme?replies=3
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 Fontshttp://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 697ChangeColor to#623101
Editing the CSS (oh my!)
Find line 697ChangeColor 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 the same theme!
