Your SlideShare is downloading. ×
Theming Wordpress with Adobe
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Theming Wordpress with Adobe

619
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 …

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

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
619
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
4
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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
  • 21. Closer to
 Pixel Minded Control FINALLY
  • 22. Closer to
 Pixel Minded Control FINALLY
  • 23. Closer to
 Pixel Minded Control FINALLY
  • 24. Closer to
 Pixel Minded Control FINALLY
  • 25. Choose
  • 26. 0 1000 2000 3000 4000 Thousands of Themes + + +
  • 27. 0 1000 2000 3000 4000 Thousands of Themes + + +
  • 28. 0 1000 2000 3000 4000 Thousands of Themes + + +
  • 29. headway.bitofgrace2.com
 genesis.bitofgrace2.com Editor1 or Editor2 PW: HartfordAdobe
  • 30. http://bit.ly/dragNdrop
  • 31. Customize
  • 32. LET’S MAKE BABIES Creating the ChildTheme /* Theme Name: TwentyThirteen Child Template: twentythirteen */ ! @import url(“../twentythirteen/style.css”); /*
 ———————————————— */
  • 33. USING CUSTOM.CSS
  • 34. USING CUSTOM.CSS Super Easy Route
  • 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. 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. 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. Fonts Fonts Fonts Fonts Fonts Fonts
  • 39. WordMark.it
  • 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. 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. 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. 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. THE END kinda
  • 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 !