THEMING WP
(my ways with Adobe)
ARE WE INSANE?
Insanity:
doing the same thing over and over again
and expecting different results.
~Albert Einstein
ARE WE INSANE?
Insanity:
doing the same thing over and over again
and expecting different results.
~Albert Einstein
clearly Einstein never designed with Wordpress
ARE WE INSANE?
BIT ABOUT ME
Iโ€™m no Adobe Expert
Iโ€™m totally bummed about Fireworks
Iโ€™m Pro-Ef๏ฌciency
15,000 Member Social Chat Site	

Multiple Small Retail WP Sites	

Local Direct Marketing
What Areโ€จ
We Building?
โ€ข header.phpโ€จ
โ€ข index.phpโ€จ
โ€ข sidebar.phpโ€จ
โ€ข footer.phpโ€จ
โ€ข archive.phpโ€จ
โ€ข single.phpโ€จ
โ€ข comments.phpโ€จ
โ€ข page.phpโ€จ
โ€ข search.phpโ€จ
โ€ข 404.phpโ€จ
โ€ข style.cssโ€จ
โ€ข functions.php
What Areโ€จ
We Building?
โ€ข header.phpโ€จ
โ€ข index.phpโ€จ
โ€ข sidebar.phpโ€จ
โ€ข footer.phpโ€จ
โ€ข archive.phpโ€จ
โ€ข single.phpโ€จ
โ€ข comments.phpโ€จ
โ€ข page.phpโ€จ
โ€ข search.phpโ€จ
โ€ข 404.phpโ€จ
โ€ข style.cssโ€จ
โ€ข functions.php
The Bare Minimum
style.css
The Bare Minimum
style.css
The Bare Minimum
Designโ€จ
the Site
Chooseโ€จ
a framework
Customizeโ€จ
framework to your design
Designโ€จ
the Site
Chooseโ€จ
a framework
Customizeโ€จ
framework to your design
Mobile First
Designโ€จ
the Site
Chooseโ€จ
a framework
Customizeโ€จ
framework to your design
Mobile First
Designโ€จ
the Site
Chooseโ€จ
a framework
Customizeโ€จ
framework to your design
Mobile First
Speed First
Designโ€จ
the Site
Chooseโ€จ
a framework
Customizeโ€จ
framework to your design
Mobile First
Speed First
Designโ€จ
the Site
Chooseโ€จ
a framework
Customizeโ€จ
framework to your design
Mobile First
Speed First
User First
Designโ€จ
the Site
Chooseโ€จ
a framework
Customizeโ€จ
framework to your design
Mobile First
Speed First
User First
Designโ€จ
the Site
Chooseโ€จ
a framework
Customizeโ€จ
framework to your design
Mobile First
Speed First
User First
Mobile
Accessibility
Standards
Speed
Browser Compatibility
Longevity
Branding
Responsive
Design
http://styletil.es
Closer toโ€จ
Pixel Minded Control	

FINALLY
Closer toโ€จ
Pixel Minded Control	

FINALLY
Closer toโ€จ
Pixel Minded Control	

FINALLY
Closer toโ€จ
Pixel Minded Control	

FINALLY
Choose
0 1000 2000 3000 4000
Thousands of Themes
+
+
+
0 1000 2000 3000 4000
Thousands of Themes
+
+
+
0 1000 2000 3000 4000
Thousands of Themes
+
+
+
headway.bitofgrace2.comโ€จ
genesis.bitofgrace2.com
Editor1 or Editor2	

PW: HartfordAdobe
http://bit.ly/dragNdrop
Customize
LETโ€™S MAKE BABIES
Creating the ChildTheme
/*	

Theme Name: TwentyThirteen Child	

Template: twentythirteen	

*/	

!
@import url(โ€œ../twentythirteen/style.cssโ€);	

/*โ€จ
โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€” */
USING CUSTOM.CSS
USING CUSTOM.CSS
Super Easy Route
USING CUSTOM.CSS
Super Easy Route
// Load the theme stylesheets	
function theme_styles() 	
{ 	
	 // Load all of the stylesheets needed for all pages	
	 wp_enqueue_style( 'main',
get_template_directory_uri() . '/style.css' );	
	 wp_enqueue_style( 'custom',
get_template_directory_uri() . '/css/custom.css' );	
}	
add_action('wp_enqueue_scripts', 'theme_styles');
Function.php Route
USING CUSTOM.CSS
@import url("../custom.css"); CSS Route
Super Easy Route
// Load the theme stylesheets	
function theme_styles() 	
{ 	
	 // Load all of the stylesheets needed for all pages	
	 wp_enqueue_style( 'main',
get_template_directory_uri() . '/style.css' );	
	 wp_enqueue_style( 'custom',
get_template_directory_uri() . '/css/custom.css' );	
}	
add_action('wp_enqueue_scripts', 'theme_styles');
Function.php Route
USING CUSTOM.CSS
@import url("../custom.css"); CSS Route
Super Easy Route
// Load the theme stylesheets	
function theme_styles() 	
{ 	
	 // Load all of the stylesheets needed for all pages	
	 wp_enqueue_style( 'main',
get_template_directory_uri() . '/style.css' );	
	 wp_enqueue_style( 'custom',
get_template_directory_uri() . '/css/custom.css' );	
}	
add_action('wp_enqueue_scripts', 'theme_styles');
Function.php Route
<link	
 ย rel="stylesheet"	
 ย href="<?php	
 ย bloginfo('template_url');	
 ย ?>/css/
my_custom_css.css"	
 ย type="text/css"	
 ย media="screen"	
 ย />
Manual Header.php Route
Fonts
Fonts
Fonts
Fonts
Fonts
Fonts
WordMark.it
Linking the fonts youโ€™ve chosen
Step 1:
Step 2: Tell your CSS where you want it, & which font.
Set the Functions.php ๏ฌle to load the fonthouse.
Linking the fonts youโ€™ve chosen
Step 1:
Step 2: Tell your CSS where you want it, & which font.
Set the Functions.php ๏ฌle to load the fonthouse.
Google and Typekit
do have cheater plugins ;)
Linking the fonts youโ€™ve chosen
Step 1:
Step 2: Tell your CSS where you want it, & which font.
Set the Functions.php ๏ฌle to load the fonthouse.
<?php
function add_google_fonts() {
wp_register_style('GoogleFonts', 'http://fonts.googleapis.com/css?family=Adamina|Montagna');
wp_enqueue_style('GoogleFonts');}
add_action('wp_print_styles', 'add_google_fonts');
?>
Google and Typekit
do have cheater plugins ;)
Linking the fonts youโ€™ve chosen
Step 1:
.entry-ยญโ€content {
font-ยญโ€family: "Adamina";
font-ยญโ€size: 16px; line-ยญโ€height: 25px;}
h1 {font-ยญโ€family: โ€œMontagnaโ€;}
Step 2: Tell your CSS where you want it, & which font.
Set the Functions.php ๏ฌle to load the fonthouse.
<?php
function add_google_fonts() {
wp_register_style('GoogleFonts', 'http://fonts.googleapis.com/css?family=Adamina|Montagna');
wp_enqueue_style('GoogleFonts');}
add_action('wp_print_styles', 'add_google_fonts');
?>
Google and Typekit
do have cheater plugins ;)
THE END	

kinda
960Grid.psd	

StyleTiles.psd	

brackets.io	

griddle.it	

placekitten.com	

http://andreasweis.com/webfontblender/	

http://typeconnection.com	

http://wordmark.it	

http://headwaythemes.com	

http://my.studiopress.com/themes/genesis	

http://skyfonts.comโ€จ
http://www.google.com/fonts	

https://typekit.com	

http://managewp.com	

http://headway101.com	

Simple Custom CSS plugin	

!
!
!
!
Thank You for Listening!
Iโ€™ve been grace, bitofgrace.com	

@bitofgrace	

FREE Bare Bones Frameworks	

http://simonwebdesign.com/simon-wp-framework/	

http://roots.io/starter-theme/	

http://html5blank.com	

!

Theming Wordpress with Adobe