The document discusses the author's experiences and insights on using WordPress for web design and development, emphasizing efficiency and best practices. It outlines essential files for WordPress themes, design principles such as mobile-first and user-first approaches, and the importance of custom CSS for styling. Additionally, it includes references to resources like frameworks and font integration techniques to improve design quality.

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
!