A look at the basics of custom theming for Wordpress, using Adobe Illustrator, Photoshop and Fireworks. Presented at a cross over Meetup of Hartford Wordpress & Hartford Adobe, sponsored by Adobe and New Horizons Training Facility

1. THEMING WP
(my ways with Adobe)

2. ARE WE INSANE?

3. Insanity:
doing the same thing over and over again
and expecting different results.
~Albert Einstein
ARE WE INSANE?

4. Insanity:
doing the same thing over and over again
and expecting different results.
~Albert Einstein
clearly Einstein never designed with Wordpress
ARE WE INSANE?

5. BIT ABOUT ME
I’m no Adobe Expert
I’m totally bummed about Fireworks
I’m Pro-Efficiency
15,000 Member Social Chat Site
Multiple Small Retail WP Sites
Local Direct Marketing

6. 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

7. 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

8. The Bare Minimum

9. style.css
The Bare Minimum

10. style.css
The Bare Minimum

11. Design
the Site
Choose
a framework
Customize
framework to your design

12. Design
the Site
Choose
a framework
Customize
framework to your design
Mobile First

13. Design
the Site
Choose
a framework
Customize
framework to your design
Mobile First

14. Design
the Site
Choose
a framework
Customize
framework to your design
Mobile First
Speed First

15. Design
the Site
Choose
a framework
Customize
framework to your design
Mobile First
Speed First

16. Design
the Site
Choose
a framework
Customize
framework to your design
Mobile First
Speed First
User First

17. Design
the Site
Choose
a framework
Customize
framework to your design
Mobile First
Speed First
User First

18. 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

19. Design

20. http://styletil.es

35. Closer to
Pixel Minded Control
FINALLY

36. Closer to
Pixel Minded Control
FINALLY

37. Closer to
Pixel Minded Control
FINALLY

38. Closer to
Pixel Minded Control
FINALLY

49. Choose

50. 0 1000 2000 3000 4000
Thousands of Themes
+
+
+

51. 0 1000 2000 3000 4000
Thousands of Themes
+
+
+

52. 0 1000 2000 3000 4000
Thousands of Themes
+
+
+

53. headway.bitofgrace2.com
genesis.bitofgrace2.com
Editor1 or Editor2
PW: HartfordAdobe

62. http://bit.ly/dragNdrop

63. Customize

64. LET’S MAKE BABIES
Creating the ChildTheme
/*
Theme Name: TwentyThirteen Child
Template: twentythirteen
*/
!
@import url(“../twentythirteen/style.css”);
/*
———————————————— */

67. USING CUSTOM.CSS

68. USING CUSTOM.CSS
Super Easy Route

69. 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

70. 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

71. 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

77. Fonts
Fonts
Fonts
Fonts
Fonts
Fonts

83. WordMark.it

84. Linking the fonts you’ve chosen
Step 1:
Step 2: Tell your CSS where you want it, & which font.
Set the Functions.php file to load the fonthouse.

85. Linking the fonts you’ve chosen
Step 1:
Step 2: Tell your CSS where you want it, & which font.
Set the Functions.php file to load the fonthouse.
Google and Typekit
do have cheater plugins ;)

86. Linking the fonts you’ve chosen
Step 1:
Step 2: Tell your CSS where you want it, & which font.
Set the Functions.php file 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 ;)

87. 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 file 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 ;)

89. THE END
kinda

90. 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
!