theming wordpress with adobe
DESCRIPTION
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 FacilityTRANSCRIPT
THEMING WP(my ways with Adobe)
ARE WE INSANE?
Insanity:doing the same thing over and over againand expecting different results.
~Albert Einstein
ARE WE INSANE?
Insanity:doing the same thing over and over againand expecting different results.
~Albert Einstein
clearly Einstein never designed with Wordpress
ARE WE INSANE?
BIT ABOUT MEI’m no Adobe ExpertI’m totally bummed about FireworksI’m Pro-Efficiency
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
Choosea framework
Customizeframework to your design
Design the Site
Choosea framework
Customizeframework to your design
Mobile First
Design the Site
Choosea framework
Customizeframework to your design
Mobile First
Design the Site
Choosea framework
Customizeframework to your design
Mobile FirstSpeed First
Design the Site
Choosea framework
Customizeframework to your design
Mobile FirstSpeed First
Design the Site
Choosea framework
Customizeframework to your design
Mobile FirstSpeed FirstUser First
Design the Site
Choosea framework
Customizeframework to your design
Mobile FirstSpeed FirstUser First
Design the Site
Choosea framework
Customizeframework to your design
Mobile FirstSpeed FirstUser First
Mobile
Accessibility
StandardsSpeed
Browser Compatibility
LongevityBranding
Responsive
Design
Closer toPixel Minded Control
FINALLY
Closer toPixel Minded Control
FINALLY
Closer toPixel Minded Control
FINALLY
Closer toPixel 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
Customize
LET’S MAKE BABIESCreating the Child Theme
/* Theme Name: Twenty Thirteen 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 stylesheetsfunction 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 stylesheetsfunction 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 stylesheetsfunction 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
FontsFontsFontsFontsFontsFonts
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.
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 Typekitdo 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 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 Typekitdo 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 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 Typekitdo 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.comhttp://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
!