Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Theming Wordpress with Adobe

1,020 views

Published on

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

Published in: Design
  • Be the first to comment

Theming Wordpress with Adobe

  1. 1. THEMING WP (my ways with Adobe)
  2. 2. ARE WE INSANE?
  3. 3. Insanity: doing the same thing over and over again and expecting different results. ~Albert Einstein ARE WE INSANE?
  4. 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. 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. 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. 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. 8. The Bare Minimum
  9. 9. style.css The Bare Minimum
  10. 10. style.css The Bare Minimum
  11. 11. Design
 the Site Choose
 a framework Customize
 framework to your design
  12. 12. Design
 the Site Choose
 a framework Customize
 framework to your design Mobile First
  13. 13. Design
 the Site Choose
 a framework Customize
 framework to your design Mobile First
  14. 14. Design
 the Site Choose
 a framework Customize
 framework to your design Mobile First Speed First
  15. 15. Design
 the Site Choose
 a framework Customize
 framework to your design Mobile First Speed First
  16. 16. Design
 the Site Choose
 a framework Customize
 framework to your design Mobile First Speed First User First
  17. 17. Design
 the Site Choose
 a framework Customize
 framework to your design Mobile First Speed First User First
  18. 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. 19. Design
  20. 20. http://styletil.es
  21. 21. Closer to
 Pixel Minded Control FINALLY
  22. 22. Closer to
 Pixel Minded Control FINALLY
  23. 23. Closer to
 Pixel Minded Control FINALLY
  24. 24. Closer to
 Pixel Minded Control FINALLY
  25. 25. Choose
  26. 26. 0 1000 2000 3000 4000 Thousands of Themes + + +
  27. 27. 0 1000 2000 3000 4000 Thousands of Themes + + +
  28. 28. 0 1000 2000 3000 4000 Thousands of Themes + + +
  29. 29. headway.bitofgrace2.com
 genesis.bitofgrace2.com Editor1 or Editor2 PW: HartfordAdobe
  30. 30. http://bit.ly/dragNdrop
  31. 31. Customize
  32. 32. LET’S MAKE BABIES Creating the ChildTheme /* Theme Name: TwentyThirteen Child Template: twentythirteen */ ! @import url(“../twentythirteen/style.css”); /*
 ———————————————— */
  33. 33. USING CUSTOM.CSS
  34. 34. USING CUSTOM.CSS Super Easy Route
  35. 35. 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
  36. 36. 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
  37. 37. 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
  38. 38. Fonts Fonts Fonts Fonts Fonts Fonts
  39. 39. WordMark.it
  40. 40. 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.
  41. 41. 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 ;)
  42. 42. 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 ;)
  43. 43. 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 ;)
  44. 44. THE END kinda
  45. 45. 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 !

×