Quick & Dirty Wordpress Customization
-
Upload
magnetic-ideas -
Category
Education
-
view
1.473 -
download
0
description
Transcript of Quick & Dirty Wordpress Customization
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!