SlideShare a Scribd company logo
1 of 55
Twenty Twelve Theme
This is one example of a basic theme that
has been changed. As you can see, you
can change a theme into almost anything
you want.
1) Preparation
2) Process
1) Using theme tools
2) CSS
3) Footer & Favicon updates
3) Review
-Site with WordPress installed and theme
close to what you are looking for.
-FTP access to site
-Image editing software (i.e. Photoshop)
-Knowledge of CSS
-Backup copy of the original theme. (Just in case)
Use a development site
like sub-domain or
folder within your
site, or set up on a
server that is not yet
active.
If a customer has a domain name and hosting, but not a
current site, I recommend the Maintenance Mode Plugin
http://sw-guide.de/wordpress/plugins/maintenance-
mode/, so that you can
Build the site and
Experiment before the
site goes live. This
plugin puts up a
“Coming Soon” notice
for all visitors who are
not logged in.
Tip:
I recommend using ColorPic for Windows
http://www.iconico.com/colorpic/ to help you
choose colors and find their hex code. This can
help you match logo colors.
Or Color Picker for Mac.
There are a couple good add-ons/extensions for
Chrome & FF including MeasureIt! and Page Ruler.
They can be a big help in determining sizes.
http://www.cssbuttongenerator.com/
This is an incredible resource for creating
professional looking buttons.
Not only before you begin, but as you make
changes. You can use a text editor like notepad
to copy & paste the file you’re working on, but you
can also use ftp to copy all the files over.
The theme tells WordPress how to
display data.
The actual data (posts & pages)
are stored in the MySqL
database.
Within the theme, there are CSS
files and PHP files.
The CSS files tell the theme how
to look.
The PHP files tell the theme what
to do (ie where to put what
content from the database.)
Theme Database
CSS PHP
header.php
-includes logo and
navigation
index.php or home.php
-home page
page.php
- single pages
sidebar.php
-can be on either side
footer.php
This section requires
knowledge of CSS.
If you have a good
theme, it will be
broken into logical
categories, header,
sidebar, footer, etc.
with good commenting
in the code.
If you decide to make changes to a default theme like Twenty Twelve,
keep in mind that it will be updated and you don’t want to lose your
changes. Therefore, you need to rename the theme or create a child
theme.
1) WordPress Child Themes are located in
/wp-content/themes/ like any other WordPress Theme.
2) They’re activated from the WordPress admin like any
other theme.
3) They’ll always have a style.css file and may often
include a functions.php file.
4) They’re just like any other WordPress theme, except
they don’t need any other files.
To create such a theme, you must specify a template
to inherit. We need to make an appropriately
named directory in /wp-content/themes/ for our new
child theme. That gives us /wp-content/themes/child-
theme-name/.
In that /child-theme-name/ directory create a new
file called style.css. Open style.css up in your
favorite text editor. Copy the following style sheet
header into style.css and save the file.
/*
Theme Name: ChildTheme
Description: A child theme for 2010 theme
Template: twentyten (case sensitive)
Author: Laura Hartwig
License: GNU General Public License
*/
@import url("../twentyten/style.css");
<?php
// This theme uses wp_nav_menu() in one location.
register_nav_menus( array(
'primary' => __( 'Primary Navigation',
'twentyten' ),
) );
?>
If in the original style.css you have :
#colophon { border-top: 2pt solid #000; }
Simply removing the border-top: 2pt solid
#000; part will NOT remove the border – you
would need to have the following none value to
override the original style.css:
#colophon { border-top: none; }
Find out more info about Child Themes here:
http://codex.wordpress.org/Child_Themes
Many WordPress themes
now allow you to easily
change your
• Header
• Menu
• Background
You’ll notice that the suggested size for the header is 960x250
for this theme. I wanted to use only 150px tall. Sometimes you
must change the setting for the header in the style.css file or
the functions.php file, but this theme adjusts automatically.
Of course, you’ll see that it inserted the image
below the navigation. We want to move it
back on top. Go to
Appearance > Editor > Header.php
Does everyone know how to use the custom
menus?
You can also change the
background the same way if this
is an option.
If you are using a theme that doesn’t offer a header
image customization, you can find the image
info in the style.css file. Usually:
#header {
background: #73a0cf
url(‘images/header.jpg’);
}
Or, in the 2012 theme:
.header-image
For 2012 theme, it is under
body {background-color:
(keep in mind there may be more than one “body”)
“Inspect Element” on Google Chrome
Firebug Add-on for Firefox or
Chrome to help decipher css.
Remember that yellow indicates
margins and purple indicates padding.
Also keep in mind that changing the CSS
will change that item for the entire site.
List of web safe fonts:
http://www.w3schools.com/cssref/css_websafe_fonts.asp
Remember that just because
that font on your computer
looks great on your site, that
may not be what everyone
else is seeing. If people
don’t have that font installed
on their computer, they won’t
see it. There are a very few
fonts that are on every
computer.
http://www.google.com/fonts/
1) Select the font you like and choose “Quick
Use”
2) Add the @import code to your style sheet
near the top. (make sure it is not in the
commented out section)
3) Integrate the font adding the font-family to
your element.
4) If there are more than one width you would
like to use, be sure to add that.
For my example, I put this in my style.css
sheet: @import
url(http://fonts.googleapis.com/css?family=Chela+One);
This is one of the most under utilized options I
see. Most themes have already stylized your
H Tags for you. Plus, this is good SEO
practice.
But we can do better.
First, customize your CSS in your style.css file
Part one- site info:
<div class="site-info">
<?php do_action( 'twentytwelve_credits' ); ?>
<a href="<?php echo esc_url( __(
'http://wordpress.org/', 'twentytwelve' ) ); ?>"
title="<?php esc_attr_e( 'Semantic Personal
Publishing Platform', 'twentytwelve' ); ?>"><?php
printf( __( 'Proudly powered by %s', 'twentytwelve'
), 'WordPress' ); ?></a>
</div><!-- .site-info -->
<div class="site-info">
<?php do_action( 'twentytwelve_credits' ); ?>
Put your custom text here.
</div><!-- .site-info -->
a) First you need a favicon
file. Start by creating it
with your photo editing
software. To make things
easier, make a square file
( I like to use 48px by 48px).
You can save it as any type
of image, jpg, png, gif. , but
name the file “favicon”.
b) Then I like to use
http://tools.dynamicdrive.com/favicon/ to
actually create the .ico file. Simply upload your
image, and then download the file it returns.
c) upload your favicon.ico file into your root
directory or the images file of your root directory.
d) add this to the header.php file if not already there:
<link rel="icon"
href="http://www.YourDomainName.com/favico
n.ico" type="image/x-icon" />
I like to put it in next to the other link files like
<link rel="stylesheet" type="text/css"
media="all" href="<?php bloginfo(
'stylesheet_url' ); ?>" />
e) Some themes already have a favicon with them.
In that case, you will need to locate the file, usually –
wp-content/theme/yourtheme/images and
replace the old file with your own. Sometimes
there is a caching issue and you won’t see your
new favicon right away, but try another browser or
computer to double check.
Test in different browsers and make
sure you are W3C compliant
(http://validator.w3.org/).
Laura@MarkNetGroup.com
845-206-9908
https://www.facebook.com/laurahartwigdesign
http://wpdecoder.com/
http://wpdecoder.com/the-basics/customizing-themes/

More Related Content

What's hot

Intro to WordPress theme development
Intro to WordPress theme developmentIntro to WordPress theme development
Intro to WordPress theme developmentThad Allender
 
How to make a WordPress theme
How to make a WordPress themeHow to make a WordPress theme
How to make a WordPress themeHardeep Asrani
 
Build a WordPress theme from HTML5 template @ Telerik
Build a WordPress theme from HTML5 template @ TelerikBuild a WordPress theme from HTML5 template @ Telerik
Build a WordPress theme from HTML5 template @ TelerikMario Peshev
 
Theme Wrangling 101
Theme Wrangling 101Theme Wrangling 101
Theme Wrangling 101mikeyarce
 
Child Theming: An Introduction to Wordpress Theme Development with Wordpres...
Child Theming: An Introduction to  Wordpress Theme Development  with Wordpres...Child Theming: An Introduction to  Wordpress Theme Development  with Wordpres...
Child Theming: An Introduction to Wordpress Theme Development with Wordpres...Aban Nesta
 
Introduction to WordPress Theme Development
Introduction to WordPress Theme DevelopmentIntroduction to WordPress Theme Development
Introduction to WordPress Theme DevelopmentSitdhibong Laokok
 
Introduction to Custom WordPress Themeing
Introduction to Custom WordPress ThemeingIntroduction to Custom WordPress Themeing
Introduction to Custom WordPress ThemeingJamie Schmid
 
WordPress Theme Development Basics
WordPress Theme Development BasicsWordPress Theme Development Basics
WordPress Theme Development BasicsTech Liminal
 
Responsive Theme Workshop - WordCamp Columbus 2015
Responsive Theme Workshop - WordCamp Columbus 2015Responsive Theme Workshop - WordCamp Columbus 2015
Responsive Theme Workshop - WordCamp Columbus 2015Joe Querin
 
WordPress Theme Workshop: Part 3
WordPress Theme Workshop: Part 3WordPress Theme Workshop: Part 3
WordPress Theme Workshop: Part 3David Bisset
 
Child Themes (WordCamp Dublin 2017) with notes
Child Themes (WordCamp Dublin 2017) with notesChild Themes (WordCamp Dublin 2017) with notes
Child Themes (WordCamp Dublin 2017) with notesDamien Carbery
 
WordPress Developers Israel Meetup #1
WordPress Developers Israel Meetup #1WordPress Developers Israel Meetup #1
WordPress Developers Israel Meetup #1Yoav Farhi
 
WordPress Child Themes
WordPress Child ThemesWordPress Child Themes
WordPress Child Themesrfair404
 
Don't Fear the Custom Theme: How to build a custom WordPress theme with only ...
Don't Fear the Custom Theme: How to build a custom WordPress theme with only ...Don't Fear the Custom Theme: How to build a custom WordPress theme with only ...
Don't Fear the Custom Theme: How to build a custom WordPress theme with only ...LinnAlexandra
 
Theme development essentials columbus oh word camp 2012
Theme development essentials   columbus oh word camp 2012Theme development essentials   columbus oh word camp 2012
Theme development essentials columbus oh word camp 2012Joe Querin
 
Converting (X)HTML/CSS template to Drupal 7 Theme
Converting (X)HTML/CSS template to Drupal 7 ThemeConverting (X)HTML/CSS template to Drupal 7 Theme
Converting (X)HTML/CSS template to Drupal 7 ThemeAdolfo Nasol
 
Word press templates
Word press templatesWord press templates
Word press templatesDan Phiffer
 
Installing And Configuration for your Wordpress blog
Installing And Configuration for your Wordpress blogInstalling And Configuration for your Wordpress blog
Installing And Configuration for your Wordpress blogigorgentry
 
Child themes
Child themesChild themes
Child themesbobwlsn
 

What's hot (20)

Intro to WordPress theme development
Intro to WordPress theme developmentIntro to WordPress theme development
Intro to WordPress theme development
 
How to make a WordPress theme
How to make a WordPress themeHow to make a WordPress theme
How to make a WordPress theme
 
Build a WordPress theme from HTML5 template @ Telerik
Build a WordPress theme from HTML5 template @ TelerikBuild a WordPress theme from HTML5 template @ Telerik
Build a WordPress theme from HTML5 template @ Telerik
 
Theme Wrangling 101
Theme Wrangling 101Theme Wrangling 101
Theme Wrangling 101
 
Child Theming: An Introduction to Wordpress Theme Development with Wordpres...
Child Theming: An Introduction to  Wordpress Theme Development  with Wordpres...Child Theming: An Introduction to  Wordpress Theme Development  with Wordpres...
Child Theming: An Introduction to Wordpress Theme Development with Wordpres...
 
Introduction to WordPress Theme Development
Introduction to WordPress Theme DevelopmentIntroduction to WordPress Theme Development
Introduction to WordPress Theme Development
 
Seven deadly theming sins
Seven deadly theming sinsSeven deadly theming sins
Seven deadly theming sins
 
Introduction to Custom WordPress Themeing
Introduction to Custom WordPress ThemeingIntroduction to Custom WordPress Themeing
Introduction to Custom WordPress Themeing
 
WordPress Theme Development Basics
WordPress Theme Development BasicsWordPress Theme Development Basics
WordPress Theme Development Basics
 
Responsive Theme Workshop - WordCamp Columbus 2015
Responsive Theme Workshop - WordCamp Columbus 2015Responsive Theme Workshop - WordCamp Columbus 2015
Responsive Theme Workshop - WordCamp Columbus 2015
 
WordPress Theme Workshop: Part 3
WordPress Theme Workshop: Part 3WordPress Theme Workshop: Part 3
WordPress Theme Workshop: Part 3
 
Child Themes (WordCamp Dublin 2017) with notes
Child Themes (WordCamp Dublin 2017) with notesChild Themes (WordCamp Dublin 2017) with notes
Child Themes (WordCamp Dublin 2017) with notes
 
WordPress Developers Israel Meetup #1
WordPress Developers Israel Meetup #1WordPress Developers Israel Meetup #1
WordPress Developers Israel Meetup #1
 
WordPress Child Themes
WordPress Child ThemesWordPress Child Themes
WordPress Child Themes
 
Don't Fear the Custom Theme: How to build a custom WordPress theme with only ...
Don't Fear the Custom Theme: How to build a custom WordPress theme with only ...Don't Fear the Custom Theme: How to build a custom WordPress theme with only ...
Don't Fear the Custom Theme: How to build a custom WordPress theme with only ...
 
Theme development essentials columbus oh word camp 2012
Theme development essentials   columbus oh word camp 2012Theme development essentials   columbus oh word camp 2012
Theme development essentials columbus oh word camp 2012
 
Converting (X)HTML/CSS template to Drupal 7 Theme
Converting (X)HTML/CSS template to Drupal 7 ThemeConverting (X)HTML/CSS template to Drupal 7 Theme
Converting (X)HTML/CSS template to Drupal 7 Theme
 
Word press templates
Word press templatesWord press templates
Word press templates
 
Installing And Configuration for your Wordpress blog
Installing And Configuration for your Wordpress blogInstalling And Configuration for your Wordpress blog
Installing And Configuration for your Wordpress blog
 
Child themes
Child themesChild themes
Child themes
 

Viewers also liked

Viewers also liked (6)

Salut i escola, i una mica més...
Salut i escola, i una mica més...Salut i escola, i una mica més...
Salut i escola, i una mica més...
 
Dogs and-people2427
Dogs and-people2427Dogs and-people2427
Dogs and-people2427
 
Dogs andpeople
Dogs andpeopleDogs andpeople
Dogs andpeople
 
Lowsbrown
LowsbrownLowsbrown
Lowsbrown
 
Three qr code
Three qr codeThree qr code
Three qr code
 
Test
TestTest
Test
 

Similar to Customizing WordPress Themes

WordPress Theme Workshop: Part 4
WordPress Theme Workshop: Part 4WordPress Theme Workshop: Part 4
WordPress Theme Workshop: Part 4David Bisset
 
WordPress 2.5 Overview - Rich Media Institute
WordPress 2.5 Overview - Rich Media InstituteWordPress 2.5 Overview - Rich Media Institute
WordPress 2.5 Overview - Rich Media InstituteBrendan Sera-Shriar
 
Newbies guide to customizing word press themes 25
Newbies guide to customizing word press themes 25Newbies guide to customizing word press themes 25
Newbies guide to customizing word press themes 25New Tricks
 
WordPress Theme Design - Rich Media Institute Workshop
WordPress Theme Design - Rich Media Institute WorkshopWordPress Theme Design - Rich Media Institute Workshop
WordPress Theme Design - Rich Media Institute WorkshopBrendan Sera-Shriar
 
Meetup child-themes
Meetup child-themesMeetup child-themes
Meetup child-themesDaisyOlsen
 
Meetup child-themes
Meetup child-themesMeetup child-themes
Meetup child-themesDaisyOlsen
 
The Way to Theme Enlightenment
The Way to Theme EnlightenmentThe Way to Theme Enlightenment
The Way to Theme EnlightenmentAmanda Giles
 
Meetup child-themes
Meetup child-themesMeetup child-themes
Meetup child-themesDaisyOlsen
 
advance theme development
advance theme developmentadvance theme development
advance theme development1amitgupta
 
Child Themes and CSS in WordPress
Child Themes and CSS in WordPressChild Themes and CSS in WordPress
Child Themes and CSS in WordPressMatthew Vaccaro
 
2009-08-28-WordPress-Parent-Child-Themes
2009-08-28-WordPress-Parent-Child-Themes2009-08-28-WordPress-Parent-Child-Themes
2009-08-28-WordPress-Parent-Child-ThemesLightSpeed
 
The Way to Theme Enlightenment 2017
The Way to Theme Enlightenment 2017The Way to Theme Enlightenment 2017
The Way to Theme Enlightenment 2017Amanda Giles
 
Theme Kickstart
Theme KickstartTheme Kickstart
Theme KickstartPeter
 
PSD to WordPress
PSD to WordPressPSD to WordPress
PSD to WordPressNile Flores
 
WortdPress Child themes: Why and How
WortdPress Child themes: Why and HowWortdPress Child themes: Why and How
WortdPress Child themes: Why and HowPaul Bearne
 
Rockford WordPress Meetup - Child Themes
Rockford WordPress Meetup - Child ThemesRockford WordPress Meetup - Child Themes
Rockford WordPress Meetup - Child ThemesAndrew Wikel
 
Firstborn child theme word camp presentation - atlanta 2013
Firstborn child theme   word camp presentation - atlanta 2013Firstborn child theme   word camp presentation - atlanta 2013
Firstborn child theme word camp presentation - atlanta 2013Evan Mullins
 

Similar to Customizing WordPress Themes (20)

WordPress Theme Workshop: Part 4
WordPress Theme Workshop: Part 4WordPress Theme Workshop: Part 4
WordPress Theme Workshop: Part 4
 
WordPress 2.5 Overview - Rich Media Institute
WordPress 2.5 Overview - Rich Media InstituteWordPress 2.5 Overview - Rich Media Institute
WordPress 2.5 Overview - Rich Media Institute
 
W pthemes
W pthemesW pthemes
W pthemes
 
Newbies guide to customizing word press themes 25
Newbies guide to customizing word press themes 25Newbies guide to customizing word press themes 25
Newbies guide to customizing word press themes 25
 
WordPress Theme Design - Rich Media Institute Workshop
WordPress Theme Design - Rich Media Institute WorkshopWordPress Theme Design - Rich Media Institute Workshop
WordPress Theme Design - Rich Media Institute Workshop
 
WordPress Theming 101
WordPress Theming 101WordPress Theming 101
WordPress Theming 101
 
Meetup child-themes
Meetup child-themesMeetup child-themes
Meetup child-themes
 
Meetup child-themes
Meetup child-themesMeetup child-themes
Meetup child-themes
 
The Way to Theme Enlightenment
The Way to Theme EnlightenmentThe Way to Theme Enlightenment
The Way to Theme Enlightenment
 
Meetup child-themes
Meetup child-themesMeetup child-themes
Meetup child-themes
 
advance theme development
advance theme developmentadvance theme development
advance theme development
 
Child Themes and CSS in WordPress
Child Themes and CSS in WordPressChild Themes and CSS in WordPress
Child Themes and CSS in WordPress
 
2009-08-28-WordPress-Parent-Child-Themes
2009-08-28-WordPress-Parent-Child-Themes2009-08-28-WordPress-Parent-Child-Themes
2009-08-28-WordPress-Parent-Child-Themes
 
The Way to Theme Enlightenment 2017
The Way to Theme Enlightenment 2017The Way to Theme Enlightenment 2017
The Way to Theme Enlightenment 2017
 
Theme Kickstart
Theme KickstartTheme Kickstart
Theme Kickstart
 
PSD to WordPress
PSD to WordPressPSD to WordPress
PSD to WordPress
 
WortdPress Child themes: Why and How
WortdPress Child themes: Why and HowWortdPress Child themes: Why and How
WortdPress Child themes: Why and How
 
Rockford WordPress Meetup - Child Themes
Rockford WordPress Meetup - Child ThemesRockford WordPress Meetup - Child Themes
Rockford WordPress Meetup - Child Themes
 
Firstborn child theme word camp presentation - atlanta 2013
Firstborn child theme   word camp presentation - atlanta 2013Firstborn child theme   word camp presentation - atlanta 2013
Firstborn child theme word camp presentation - atlanta 2013
 
HTML/CSS for WordPress
HTML/CSS for WordPressHTML/CSS for WordPress
HTML/CSS for WordPress
 

More from Laura Hartwig

Word press security 101 2018
Word press security 101  2018 Word press security 101  2018
Word press security 101 2018 Laura Hartwig
 
How to Start a WordPress Meetup in Your Town
How to Start a WordPress Meetup in Your TownHow to Start a WordPress Meetup in Your Town
How to Start a WordPress Meetup in Your TownLaura Hartwig
 
Favorite WordPress Plugins 2016
Favorite WordPress Plugins 2016Favorite WordPress Plugins 2016
Favorite WordPress Plugins 2016Laura Hartwig
 
Customizing Your WordPress Theme Using Firebug and Basic CSS
Customizing Your WordPress Theme Using Firebug and Basic CSSCustomizing Your WordPress Theme Using Firebug and Basic CSS
Customizing Your WordPress Theme Using Firebug and Basic CSSLaura Hartwig
 

More from Laura Hartwig (8)

WordPress 101
WordPress 101 WordPress 101
WordPress 101
 
Website content
Website contentWebsite content
Website content
 
Websites 101
Websites 101Websites 101
Websites 101
 
Word press security 101 2018
Word press security 101  2018 Word press security 101  2018
Word press security 101 2018
 
How to Start a WordPress Meetup in Your Town
How to Start a WordPress Meetup in Your TownHow to Start a WordPress Meetup in Your Town
How to Start a WordPress Meetup in Your Town
 
Woocommerce 101
Woocommerce 101Woocommerce 101
Woocommerce 101
 
Favorite WordPress Plugins 2016
Favorite WordPress Plugins 2016Favorite WordPress Plugins 2016
Favorite WordPress Plugins 2016
 
Customizing Your WordPress Theme Using Firebug and Basic CSS
Customizing Your WordPress Theme Using Firebug and Basic CSSCustomizing Your WordPress Theme Using Firebug and Basic CSS
Customizing Your WordPress Theme Using Firebug and Basic CSS
 

Recently uploaded

Speed Wins: From Kafka to APIs in Minutes
Speed Wins: From Kafka to APIs in MinutesSpeed Wins: From Kafka to APIs in Minutes
Speed Wins: From Kafka to APIs in Minutesconfluent
 
PLAI - Acceleration Program for Generative A.I. Startups
PLAI - Acceleration Program for Generative A.I. StartupsPLAI - Acceleration Program for Generative A.I. Startups
PLAI - Acceleration Program for Generative A.I. StartupsStefano
 
SOQL 201 for Admins & Developers: Slice & Dice Your Org’s Data With Aggregate...
SOQL 201 for Admins & Developers: Slice & Dice Your Org’s Data With Aggregate...SOQL 201 for Admins & Developers: Slice & Dice Your Org’s Data With Aggregate...
SOQL 201 for Admins & Developers: Slice & Dice Your Org’s Data With Aggregate...CzechDreamin
 
Salesforce Adoption – Metrics, Methods, and Motivation, Antone Kom
Salesforce Adoption – Metrics, Methods, and Motivation, Antone KomSalesforce Adoption – Metrics, Methods, and Motivation, Antone Kom
Salesforce Adoption – Metrics, Methods, and Motivation, Antone KomCzechDreamin
 
The Metaverse: Are We There Yet?
The  Metaverse:    Are   We  There  Yet?The  Metaverse:    Are   We  There  Yet?
The Metaverse: Are We There Yet?Mark Billinghurst
 
TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...
TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...
TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...marcuskenyatta275
 
How Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdf
How Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdfHow Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdf
How Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdfFIDO Alliance
 
Oauth 2.0 Introduction and Flows with MuleSoft
Oauth 2.0 Introduction and Flows with MuleSoftOauth 2.0 Introduction and Flows with MuleSoft
Oauth 2.0 Introduction and Flows with MuleSoftshyamraj55
 
WSO2CONMay2024OpenSourceConferenceDebrief.pptx
WSO2CONMay2024OpenSourceConferenceDebrief.pptxWSO2CONMay2024OpenSourceConferenceDebrief.pptx
WSO2CONMay2024OpenSourceConferenceDebrief.pptxJennifer Lim
 
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo DiehlFuture Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo DiehlPeter Udo Diehl
 
Integrating Telephony Systems with Salesforce: Insights and Considerations, B...
Integrating Telephony Systems with Salesforce: Insights and Considerations, B...Integrating Telephony Systems with Salesforce: Insights and Considerations, B...
Integrating Telephony Systems with Salesforce: Insights and Considerations, B...CzechDreamin
 
Top 10 Symfony Development Companies 2024
Top 10 Symfony Development Companies 2024Top 10 Symfony Development Companies 2024
Top 10 Symfony Development Companies 2024TopCSSGallery
 
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...CzechDreamin
 
AI presentation and introduction - Retrieval Augmented Generation RAG 101
AI presentation and introduction - Retrieval Augmented Generation RAG 101AI presentation and introduction - Retrieval Augmented Generation RAG 101
AI presentation and introduction - Retrieval Augmented Generation RAG 101vincent683379
 
IoT Analytics Company Presentation May 2024
IoT Analytics Company Presentation May 2024IoT Analytics Company Presentation May 2024
IoT Analytics Company Presentation May 2024IoTAnalytics
 
Extensible Python: Robustness through Addition - PyCon 2024
Extensible Python: Robustness through Addition - PyCon 2024Extensible Python: Robustness through Addition - PyCon 2024
Extensible Python: Robustness through Addition - PyCon 2024Patrick Viafore
 
Structuring Teams and Portfolios for Success
Structuring Teams and Portfolios for SuccessStructuring Teams and Portfolios for Success
Structuring Teams and Portfolios for SuccessUXDXConf
 
A Business-Centric Approach to Design System Strategy
A Business-Centric Approach to Design System StrategyA Business-Centric Approach to Design System Strategy
A Business-Centric Approach to Design System StrategyUXDXConf
 
What's New in Teams Calling, Meetings and Devices April 2024
What's New in Teams Calling, Meetings and Devices April 2024What's New in Teams Calling, Meetings and Devices April 2024
What's New in Teams Calling, Meetings and Devices April 2024Stephanie Beckett
 
FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...
FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...
FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...FIDO Alliance
 

Recently uploaded (20)

Speed Wins: From Kafka to APIs in Minutes
Speed Wins: From Kafka to APIs in MinutesSpeed Wins: From Kafka to APIs in Minutes
Speed Wins: From Kafka to APIs in Minutes
 
PLAI - Acceleration Program for Generative A.I. Startups
PLAI - Acceleration Program for Generative A.I. StartupsPLAI - Acceleration Program for Generative A.I. Startups
PLAI - Acceleration Program for Generative A.I. Startups
 
SOQL 201 for Admins & Developers: Slice & Dice Your Org’s Data With Aggregate...
SOQL 201 for Admins & Developers: Slice & Dice Your Org’s Data With Aggregate...SOQL 201 for Admins & Developers: Slice & Dice Your Org’s Data With Aggregate...
SOQL 201 for Admins & Developers: Slice & Dice Your Org’s Data With Aggregate...
 
Salesforce Adoption – Metrics, Methods, and Motivation, Antone Kom
Salesforce Adoption – Metrics, Methods, and Motivation, Antone KomSalesforce Adoption – Metrics, Methods, and Motivation, Antone Kom
Salesforce Adoption – Metrics, Methods, and Motivation, Antone Kom
 
The Metaverse: Are We There Yet?
The  Metaverse:    Are   We  There  Yet?The  Metaverse:    Are   We  There  Yet?
The Metaverse: Are We There Yet?
 
TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...
TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...
TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...
 
How Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdf
How Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdfHow Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdf
How Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdf
 
Oauth 2.0 Introduction and Flows with MuleSoft
Oauth 2.0 Introduction and Flows with MuleSoftOauth 2.0 Introduction and Flows with MuleSoft
Oauth 2.0 Introduction and Flows with MuleSoft
 
WSO2CONMay2024OpenSourceConferenceDebrief.pptx
WSO2CONMay2024OpenSourceConferenceDebrief.pptxWSO2CONMay2024OpenSourceConferenceDebrief.pptx
WSO2CONMay2024OpenSourceConferenceDebrief.pptx
 
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo DiehlFuture Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
 
Integrating Telephony Systems with Salesforce: Insights and Considerations, B...
Integrating Telephony Systems with Salesforce: Insights and Considerations, B...Integrating Telephony Systems with Salesforce: Insights and Considerations, B...
Integrating Telephony Systems with Salesforce: Insights and Considerations, B...
 
Top 10 Symfony Development Companies 2024
Top 10 Symfony Development Companies 2024Top 10 Symfony Development Companies 2024
Top 10 Symfony Development Companies 2024
 
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
 
AI presentation and introduction - Retrieval Augmented Generation RAG 101
AI presentation and introduction - Retrieval Augmented Generation RAG 101AI presentation and introduction - Retrieval Augmented Generation RAG 101
AI presentation and introduction - Retrieval Augmented Generation RAG 101
 
IoT Analytics Company Presentation May 2024
IoT Analytics Company Presentation May 2024IoT Analytics Company Presentation May 2024
IoT Analytics Company Presentation May 2024
 
Extensible Python: Robustness through Addition - PyCon 2024
Extensible Python: Robustness through Addition - PyCon 2024Extensible Python: Robustness through Addition - PyCon 2024
Extensible Python: Robustness through Addition - PyCon 2024
 
Structuring Teams and Portfolios for Success
Structuring Teams and Portfolios for SuccessStructuring Teams and Portfolios for Success
Structuring Teams and Portfolios for Success
 
A Business-Centric Approach to Design System Strategy
A Business-Centric Approach to Design System StrategyA Business-Centric Approach to Design System Strategy
A Business-Centric Approach to Design System Strategy
 
What's New in Teams Calling, Meetings and Devices April 2024
What's New in Teams Calling, Meetings and Devices April 2024What's New in Teams Calling, Meetings and Devices April 2024
What's New in Teams Calling, Meetings and Devices April 2024
 
FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...
FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...
FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...
 

Customizing WordPress Themes

  • 2. This is one example of a basic theme that has been changed. As you can see, you can change a theme into almost anything you want.
  • 3. 1) Preparation 2) Process 1) Using theme tools 2) CSS 3) Footer & Favicon updates 3) Review
  • 4.
  • 5. -Site with WordPress installed and theme close to what you are looking for. -FTP access to site -Image editing software (i.e. Photoshop) -Knowledge of CSS -Backup copy of the original theme. (Just in case)
  • 6. Use a development site like sub-domain or folder within your site, or set up on a server that is not yet active.
  • 7. If a customer has a domain name and hosting, but not a current site, I recommend the Maintenance Mode Plugin http://sw-guide.de/wordpress/plugins/maintenance- mode/, so that you can Build the site and Experiment before the site goes live. This plugin puts up a “Coming Soon” notice for all visitors who are not logged in. Tip:
  • 8.
  • 9. I recommend using ColorPic for Windows http://www.iconico.com/colorpic/ to help you choose colors and find their hex code. This can help you match logo colors. Or Color Picker for Mac.
  • 10. There are a couple good add-ons/extensions for Chrome & FF including MeasureIt! and Page Ruler. They can be a big help in determining sizes.
  • 11. http://www.cssbuttongenerator.com/ This is an incredible resource for creating professional looking buttons.
  • 12. Not only before you begin, but as you make changes. You can use a text editor like notepad to copy & paste the file you’re working on, but you can also use ftp to copy all the files over.
  • 13. The theme tells WordPress how to display data. The actual data (posts & pages) are stored in the MySqL database. Within the theme, there are CSS files and PHP files. The CSS files tell the theme how to look. The PHP files tell the theme what to do (ie where to put what content from the database.) Theme Database CSS PHP
  • 14. header.php -includes logo and navigation index.php or home.php -home page page.php - single pages sidebar.php -can be on either side footer.php
  • 15. This section requires knowledge of CSS. If you have a good theme, it will be broken into logical categories, header, sidebar, footer, etc. with good commenting in the code.
  • 16. If you decide to make changes to a default theme like Twenty Twelve, keep in mind that it will be updated and you don’t want to lose your changes. Therefore, you need to rename the theme or create a child theme. 1) WordPress Child Themes are located in /wp-content/themes/ like any other WordPress Theme. 2) They’re activated from the WordPress admin like any other theme. 3) They’ll always have a style.css file and may often include a functions.php file. 4) They’re just like any other WordPress theme, except they don’t need any other files.
  • 17. To create such a theme, you must specify a template to inherit. We need to make an appropriately named directory in /wp-content/themes/ for our new child theme. That gives us /wp-content/themes/child- theme-name/.
  • 18. In that /child-theme-name/ directory create a new file called style.css. Open style.css up in your favorite text editor. Copy the following style sheet header into style.css and save the file. /* Theme Name: ChildTheme Description: A child theme for 2010 theme Template: twentyten (case sensitive) Author: Laura Hartwig License: GNU General Public License */ @import url("../twentyten/style.css");
  • 19. <?php // This theme uses wp_nav_menu() in one location. register_nav_menus( array( 'primary' => __( 'Primary Navigation', 'twentyten' ), ) ); ?>
  • 20. If in the original style.css you have : #colophon { border-top: 2pt solid #000; } Simply removing the border-top: 2pt solid #000; part will NOT remove the border – you would need to have the following none value to override the original style.css: #colophon { border-top: none; }
  • 21. Find out more info about Child Themes here: http://codex.wordpress.org/Child_Themes
  • 22.
  • 23.
  • 24.
  • 25. Many WordPress themes now allow you to easily change your • Header • Menu • Background
  • 26.
  • 27. You’ll notice that the suggested size for the header is 960x250 for this theme. I wanted to use only 150px tall. Sometimes you must change the setting for the header in the style.css file or the functions.php file, but this theme adjusts automatically.
  • 28. Of course, you’ll see that it inserted the image below the navigation. We want to move it back on top. Go to Appearance > Editor > Header.php
  • 29.
  • 30. Does everyone know how to use the custom menus?
  • 31. You can also change the background the same way if this is an option.
  • 32.
  • 33. If you are using a theme that doesn’t offer a header image customization, you can find the image info in the style.css file. Usually: #header { background: #73a0cf url(‘images/header.jpg’); } Or, in the 2012 theme: .header-image
  • 34. For 2012 theme, it is under body {background-color: (keep in mind there may be more than one “body”)
  • 35. “Inspect Element” on Google Chrome
  • 36.
  • 37. Firebug Add-on for Firefox or Chrome to help decipher css.
  • 38.
  • 39. Remember that yellow indicates margins and purple indicates padding. Also keep in mind that changing the CSS will change that item for the entire site.
  • 40. List of web safe fonts: http://www.w3schools.com/cssref/css_websafe_fonts.asp Remember that just because that font on your computer looks great on your site, that may not be what everyone else is seeing. If people don’t have that font installed on their computer, they won’t see it. There are a very few fonts that are on every computer.
  • 42. 1) Select the font you like and choose “Quick Use” 2) Add the @import code to your style sheet near the top. (make sure it is not in the commented out section) 3) Integrate the font adding the font-family to your element. 4) If there are more than one width you would like to use, be sure to add that. For my example, I put this in my style.css sheet: @import url(http://fonts.googleapis.com/css?family=Chela+One);
  • 43. This is one of the most under utilized options I see. Most themes have already stylized your H Tags for you. Plus, this is good SEO practice.
  • 44. But we can do better. First, customize your CSS in your style.css file
  • 45.
  • 46. Part one- site info: <div class="site-info"> <?php do_action( 'twentytwelve_credits' ); ?> <a href="<?php echo esc_url( __( 'http://wordpress.org/', 'twentytwelve' ) ); ?>" title="<?php esc_attr_e( 'Semantic Personal Publishing Platform', 'twentytwelve' ); ?>"><?php printf( __( 'Proudly powered by %s', 'twentytwelve' ), 'WordPress' ); ?></a> </div><!-- .site-info -->
  • 47. <div class="site-info"> <?php do_action( 'twentytwelve_credits' ); ?> Put your custom text here. </div><!-- .site-info -->
  • 48.
  • 49. a) First you need a favicon file. Start by creating it with your photo editing software. To make things easier, make a square file ( I like to use 48px by 48px). You can save it as any type of image, jpg, png, gif. , but name the file “favicon”.
  • 50. b) Then I like to use http://tools.dynamicdrive.com/favicon/ to actually create the .ico file. Simply upload your image, and then download the file it returns. c) upload your favicon.ico file into your root directory or the images file of your root directory.
  • 51. d) add this to the header.php file if not already there: <link rel="icon" href="http://www.YourDomainName.com/favico n.ico" type="image/x-icon" /> I like to put it in next to the other link files like <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
  • 52. e) Some themes already have a favicon with them. In that case, you will need to locate the file, usually – wp-content/theme/yourtheme/images and replace the old file with your own. Sometimes there is a caching issue and you won’t see your new favicon right away, but try another browser or computer to double check.
  • 53.
  • 54. Test in different browsers and make sure you are W3C compliant (http://validator.w3.org/).