SlideShare a Scribd company logo
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
Customizing WordPress Themes
-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:
Customizing WordPress Themes
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
Customizing WordPress Themes
Customizing WordPress Themes
Customizing WordPress Themes
Many WordPress themes
now allow you to easily
change your
• Header
• Menu
• Background
Customizing WordPress Themes
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
Customizing WordPress Themes
Does everyone know how to use the custom
menus?
You can also change the
background the same way if this
is an option.
Customizing WordPress Themes
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
Customizing WordPress Themes
Firebug Add-on for Firefox or
Chrome to help decipher css.
Customizing WordPress Themes
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
Customizing WordPress Themes
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 -->
Customizing WordPress Themes
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.
Customizing WordPress Themes
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 development
Thad Allender
 
How to make a WordPress theme
How to make a WordPress themeHow to make a WordPress theme
How to make a WordPress theme
Hardeep 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 @ Telerik
Mario Peshev
 
Theme Wrangling 101
Theme Wrangling 101Theme Wrangling 101
Theme Wrangling 101
mikeyarce
 
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 Development
Sitdhibong Laokok
 
Seven deadly theming sins
Seven deadly theming sinsSeven deadly theming sins
Seven deadly theming sins
George Stephanis
 
Introduction to Custom WordPress Themeing
Introduction to Custom WordPress ThemeingIntroduction to Custom WordPress Themeing
Introduction to Custom WordPress Themeing
Jamie Schmid
 
WordPress Theme Development Basics
WordPress Theme Development BasicsWordPress Theme Development Basics
WordPress Theme Development Basics
Tech Liminal
 
Responsive Theme Workshop - WordCamp Columbus 2015
Responsive Theme Workshop - WordCamp Columbus 2015Responsive Theme Workshop - WordCamp Columbus 2015
Responsive Theme Workshop - WordCamp Columbus 2015
Joe Querin
 
WordPress Theme Workshop: Part 3
WordPress Theme Workshop: Part 3WordPress Theme Workshop: Part 3
WordPress Theme Workshop: Part 3
David 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 notes
Damien Carbery
 
WordPress Developers Israel Meetup #1
WordPress Developers Israel Meetup #1WordPress Developers Israel Meetup #1
WordPress Developers Israel Meetup #1
Yoav Farhi
 
WordPress Child Themes
WordPress Child ThemesWordPress Child Themes
WordPress Child Themes
rfair404
 
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 2012
Joe 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 Theme
Adolfo Nasol
 
Word press templates
Word press templatesWord press templates
Word press templates
Dan 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 blog
igorgentry
 
Child themes
Child themesChild themes
Child themes
bobwlsn
 

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

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...
CAPI Marià Fortuny
 
Dogs and-people2427
Dogs and-people2427Dogs and-people2427
Dogs and-people2427
charo alonso
 
Dogs andpeople
Dogs andpeopleDogs andpeople
Dogs andpeople
charo alonso
 
Lowsbrown
LowsbrownLowsbrown
Lowsbrown
charo alonso
 
Three qr code
Three qr codeThree qr code
Three qr code
Hugo Satyre
 

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 4
David 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 Institute
Brendan Sera-Shriar
 
W pthemes
W pthemesW pthemes
W pthemes
Becky Davis
 
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
New 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 Workshop
Brendan Sera-Shriar
 
WordPress Theming 101
WordPress Theming 101WordPress Theming 101
WordPress Theming 101
Zero Point Development
 
Meetup child-themes
Meetup child-themesMeetup child-themes
Meetup child-themes
DaisyOlsen
 
Meetup child-themes
Meetup child-themesMeetup child-themes
Meetup child-themes
DaisyOlsen
 
The Way to Theme Enlightenment
The Way to Theme EnlightenmentThe Way to Theme Enlightenment
The Way to Theme Enlightenment
Amanda Giles
 
Meetup child-themes
Meetup child-themesMeetup child-themes
Meetup child-themes
DaisyOlsen
 
advance theme development
advance theme developmentadvance theme development
advance theme development
1amitgupta
 
Child Themes and CSS in WordPress
Child Themes and CSS in WordPressChild Themes and CSS in WordPress
Child Themes and CSS in WordPress
Matthew 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-Themes
LightSpeed
 
The Way to Theme Enlightenment 2017
The Way to Theme Enlightenment 2017The Way to Theme Enlightenment 2017
The Way to Theme Enlightenment 2017
Amanda Giles
 
Theme Kickstart
Theme KickstartTheme Kickstart
Theme Kickstart
Peter
 
PSD to WordPress
PSD to WordPressPSD to WordPress
PSD to WordPress
Nile Flores
 
WortdPress Child themes: Why and How
WortdPress Child themes: Why and HowWortdPress Child themes: Why and How
WortdPress Child themes: Why and How
Paul Bearne
 
Rockford WordPress Meetup - Child Themes
Rockford WordPress Meetup - Child ThemesRockford WordPress Meetup - Child Themes
Rockford WordPress Meetup - Child Themes
Andrew 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 2013
Evan Mullins
 
HTML/CSS for WordPress
HTML/CSS for WordPressHTML/CSS for WordPress
HTML/CSS for WordPress
Kanchha kaji Prajapati
 

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

WordPress 101
WordPress 101 WordPress 101
WordPress 101
Laura Hartwig
 
Website content
Website contentWebsite content
Website content
Laura Hartwig
 
Websites 101
Websites 101Websites 101
Websites 101
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 Town
Laura Hartwig
 
Woocommerce 101
Woocommerce 101Woocommerce 101
Woocommerce 101
Laura Hartwig
 
Favorite WordPress Plugins 2016
Favorite WordPress Plugins 2016Favorite WordPress Plugins 2016
Favorite WordPress Plugins 2016
Laura 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 CSS
Laura 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

CHAPTER-8 COMPONENTS OF COMPUTER SYSTEM CLASS 9 CBSE
CHAPTER-8 COMPONENTS OF COMPUTER SYSTEM CLASS 9 CBSECHAPTER-8 COMPONENTS OF COMPUTER SYSTEM CLASS 9 CBSE
CHAPTER-8 COMPONENTS OF COMPUTER SYSTEM CLASS 9 CBSE
kumarjarun2010
 
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-InTrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc
 
Google I/O Extended Harare Merged Slides
Google I/O Extended Harare Merged SlidesGoogle I/O Extended Harare Merged Slides
Google I/O Extended Harare Merged Slides
Google Developer Group - Harare
 
How to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptxHow to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptx
Adam Dunkels
 
WPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide DeckWPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide Deck
Lidia A.
 
Opencast Summit 2024 — Opencast @ University of Münster
Opencast Summit 2024 — Opencast @ University of MünsterOpencast Summit 2024 — Opencast @ University of Münster
Opencast Summit 2024 — Opencast @ University of Münster
Matthias Neugebauer
 
Introduction-to-the-IAM-Platform-Implementation-Plan.pptx
Introduction-to-the-IAM-Platform-Implementation-Plan.pptxIntroduction-to-the-IAM-Platform-Implementation-Plan.pptx
Introduction-to-the-IAM-Platform-Implementation-Plan.pptx
313mohammedarshad
 
Three New Criminal Laws in India 1 July 2024
Three New Criminal Laws in India 1 July 2024Three New Criminal Laws in India 1 July 2024
Three New Criminal Laws in India 1 July 2024
aakash malhotra
 
How Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdfHow Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdf
HackersList
 
High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...
High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...
High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...
bhumivarma35300
 
EuroPython 2024 - Streamlining Testing in a Large Python Codebase
EuroPython 2024 - Streamlining Testing in a Large Python CodebaseEuroPython 2024 - Streamlining Testing in a Large Python Codebase
EuroPython 2024 - Streamlining Testing in a Large Python Codebase
Jimmy Lai
 
Best Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdfBest Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdf
Tatiana Al-Chueyr
 
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - MydbopsScaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Mydbops
 
Data Integration Basics: Merging & Joining Data
Data Integration Basics: Merging & Joining DataData Integration Basics: Merging & Joining Data
Data Integration Basics: Merging & Joining Data
Safe Software
 
Using LLM Agents with Llama 3, LangGraph and Milvus
Using LLM Agents with Llama 3, LangGraph and MilvusUsing LLM Agents with Llama 3, LangGraph and Milvus
Using LLM Agents with Llama 3, LangGraph and Milvus
Zilliz
 
"Mastering Graphic Design: Essential Tips and Tricks for Beginners and Profes...
"Mastering Graphic Design: Essential Tips and Tricks for Beginners and Profes..."Mastering Graphic Design: Essential Tips and Tricks for Beginners and Profes...
"Mastering Graphic Design: Essential Tips and Tricks for Beginners and Profes...
Anant Gupta
 
Implementations of Fused Deposition Modeling in real world
Implementations of Fused Deposition Modeling  in real worldImplementations of Fused Deposition Modeling  in real world
Implementations of Fused Deposition Modeling in real world
Emerging Tech
 
find out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challengesfind out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challenges
huseindihon
 
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
Kief Morris
 
Tirana Tech Meetup - Agentic RAG with Milvus, Llama3 and Ollama
Tirana Tech Meetup - Agentic RAG with Milvus, Llama3 and OllamaTirana Tech Meetup - Agentic RAG with Milvus, Llama3 and Ollama
Tirana Tech Meetup - Agentic RAG with Milvus, Llama3 and Ollama
Zilliz
 

Recently uploaded (20)

CHAPTER-8 COMPONENTS OF COMPUTER SYSTEM CLASS 9 CBSE
CHAPTER-8 COMPONENTS OF COMPUTER SYSTEM CLASS 9 CBSECHAPTER-8 COMPONENTS OF COMPUTER SYSTEM CLASS 9 CBSE
CHAPTER-8 COMPONENTS OF COMPUTER SYSTEM CLASS 9 CBSE
 
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-InTrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
 
Google I/O Extended Harare Merged Slides
Google I/O Extended Harare Merged SlidesGoogle I/O Extended Harare Merged Slides
Google I/O Extended Harare Merged Slides
 
How to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptxHow to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptx
 
WPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide DeckWPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide Deck
 
Opencast Summit 2024 — Opencast @ University of Münster
Opencast Summit 2024 — Opencast @ University of MünsterOpencast Summit 2024 — Opencast @ University of Münster
Opencast Summit 2024 — Opencast @ University of Münster
 
Introduction-to-the-IAM-Platform-Implementation-Plan.pptx
Introduction-to-the-IAM-Platform-Implementation-Plan.pptxIntroduction-to-the-IAM-Platform-Implementation-Plan.pptx
Introduction-to-the-IAM-Platform-Implementation-Plan.pptx
 
Three New Criminal Laws in India 1 July 2024
Three New Criminal Laws in India 1 July 2024Three New Criminal Laws in India 1 July 2024
Three New Criminal Laws in India 1 July 2024
 
How Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdfHow Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdf
 
High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...
High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...
High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...
 
EuroPython 2024 - Streamlining Testing in a Large Python Codebase
EuroPython 2024 - Streamlining Testing in a Large Python CodebaseEuroPython 2024 - Streamlining Testing in a Large Python Codebase
EuroPython 2024 - Streamlining Testing in a Large Python Codebase
 
Best Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdfBest Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdf
 
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - MydbopsScaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
 
Data Integration Basics: Merging & Joining Data
Data Integration Basics: Merging & Joining DataData Integration Basics: Merging & Joining Data
Data Integration Basics: Merging & Joining Data
 
Using LLM Agents with Llama 3, LangGraph and Milvus
Using LLM Agents with Llama 3, LangGraph and MilvusUsing LLM Agents with Llama 3, LangGraph and Milvus
Using LLM Agents with Llama 3, LangGraph and Milvus
 
"Mastering Graphic Design: Essential Tips and Tricks for Beginners and Profes...
"Mastering Graphic Design: Essential Tips and Tricks for Beginners and Profes..."Mastering Graphic Design: Essential Tips and Tricks for Beginners and Profes...
"Mastering Graphic Design: Essential Tips and Tricks for Beginners and Profes...
 
Implementations of Fused Deposition Modeling in real world
Implementations of Fused Deposition Modeling  in real worldImplementations of Fused Deposition Modeling  in real world
Implementations of Fused Deposition Modeling in real world
 
find out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challengesfind out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challenges
 
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
 
Tirana Tech Meetup - Agentic RAG with Milvus, Llama3 and Ollama
Tirana Tech Meetup - Agentic RAG with Milvus, Llama3 and OllamaTirana Tech Meetup - Agentic RAG with Milvus, Llama3 and Ollama
Tirana Tech Meetup - Agentic RAG with Milvus, Llama3 and Ollama
 

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
  • 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:
  • 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
  • 25. Many WordPress themes now allow you to easily change your • Header • Menu • Background
  • 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
  • 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.
  • 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
  • 37. Firebug Add-on for Firefox or Chrome to help decipher css.
  • 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
  • 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 -->
  • 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.
  • 54. Test in different browsers and make sure you are W3C compliant (http://validator.w3.org/).