0
Wordpress and Your Brand
Sara Cannon
Designer/Interactive at Scout Branding.
Wordpress and Your Brand
Sara Cannon
Designer/Interactive at Scout Branding.
@saracannon
sara@scoutbrand.com
Why Use Wordpress?
Why Use Wordpress?

• Content Management System (CMS)
Why Use Wordpress?

• Content Management System (CMS)

• Easy to Use (almost anyone can catch on how to make a post)
Why Use Wordpress?

• Content Management System (CMS)

• Easy to Use (almost anyone can catch on how to make a post)

• Wi...
Why Use Wordpress?

• Content Management System (CMS)

• Easy to Use (almost anyone can catch on how to make a post)

• Wi...
But I don’t want my website to look “bloggy”
But I don’t want my website to look “bloggy”
thats ok.
Adapt Wordpress to Your Brand
Adapt Wordpress to Your Brand
not your brand to wordpress.
Steps to Adapt Wordpress to Your Brand
Steps to Adapt Wordpress to Your Brand
1. Know your Brand / Brand Strategy
Steps to Adapt Wordpress to Your Brand
1. Know your Brand / Brand Strategy
2. Choose a Theme that best fits the FUNCTIONALI...
Steps to Adapt Wordpress to Your Brand
1. Know your Brand / Brand Strategy
2. Choose a Theme that best fits the FUNCTIONALI...
Steps to Adapt Wordpress to Your Brand
1. Know your Brand / Brand Strategy
2. Choose a Theme that best fits the FUNCTIONALI...
Steps to Adapt Wordpress to Your Brand
1. Know your Brand / Brand Strategy
2. Choose a Theme that best fits the FUNCTIONALI...
Steps to Adapt Wordpress to Your Brand
1. Know your Brand / Brand Strategy
2. Choose a Theme that best fits the FUNCTIONALI...
Steps to Adapt Wordpress to Your Brand
1. Know your Brand / Brand Strategy
Brand Strategy
Brand Strategy: Offline or Online?
Brand Strategy: Offline or Online?

• Offline Brands: who you will meet in person
Brand Strategy: Offline or Online?

• Offline Brands: who you will meet in person
  - Companies
Brand Strategy: Offline or Online?

• Offline Brands: who you will meet in person
  - Companies
  - Stores
Brand Strategy: Offline or Online?

• Offline Brands: who you will meet in person
  - Companies
  - Stores
  - Locations
Brand Strategy: Offline or Online?

• Offline Brands: who you will meet in person
  - Companies
  - Stores
  - Locations


•...
Brand Strategy: Offline or Online?

• Offline Brands: who you will meet in person
  - Companies
  - Stores
  - Locations


•...
Brand Strategy: Offline or Online?

• Offline Brands: who you will meet in person
  - Companies
  - Stores
  - Locations


•...
Brand Strategy: Offline or Online?

• Offline Brands: who you will meet in person
  - Companies
  - Stores
  - Locations


•...
Brand Strategy: Offline or Online?

• Offline Brands: who you will meet in person
  - Companies
  - Stores
  - Locations


•...
Brand Strategy: Online Brands
Brand Strategy: Online Brands

• MasdenCycles.com
Brand Strategy: Online Brands

• MasdenCycles.com


• Mint.com
Brand Strategy: Online Brands

• MasdenCycles.com


• Mint.com


• Wordpress.org
Brand Strategy: Online Brands
Brand Strategy: Online Brands
Brand Strategy: Online Brands
Brand Strategy: Online Brands
Brand Strategy: Online Brands
Brand Strategy: Online Brands
Brand Strategy: Offline Brands
Brand Strategy: Offline Brands

• Target.com
Brand Strategy: Offline Brands

• Target.com


• PFChangs.com
Brand Strategy: Offline Brands
Brand Strategy: Offline Brands
Brand Strategy: Offline Brands
Steps to Adapt Wordpress to Your Brand
1. Know your Brand / Brand Strategy
2. Choose a Theme that best fits the FUNCTIONALI...
Theme Functionality
Things to Look for in Choosing a Theme
- Base Menu Structure
Things to Look for in Choosing a Theme
- Base Menu Structure
  - Does my Main Menu need to be based off of Pages, Categori...
Things to Look for in Choosing a Theme
- Base Menu Structure
  - Does my Main Menu need to be based off of Pages, Categori...
Things to Look for in Choosing a Theme
- Base Menu Structure
  - Does my Main Menu need to be based off of Pages, Categori...
Things to Look for in Choosing a Theme
- Base Menu Structure
  - Does my Main Menu need to be based off of Pages, Categori...
Things to Look for in Choosing a Theme
- Base Menu Structure
  - Does my Main Menu need to be based off of Pages, Categori...
Steps to Adapt Wordpress to Your Brand
1. Know your Brand / Brand Strategy
2. Choose a Theme that best fits the FUNCTIONALI...
Designing Your Brand
Designing Your Brand

• Use PhotoShop/Illustrator to Design
Designing Your Brand

• Use PhotoShop/Illustrator to Design


• Don’t constrain yourself to the Chosen Theme’s Layout.
Designing Your Brand

• Use PhotoShop/Illustrator to Design


• Don’t constrain yourself to the Chosen Theme’s Layout.


•...
Steps to Adapt Wordpress to Your Brand
1. Know your Brand / Brand Strategy
2. Choose a Theme that best fits the FUNCTIONALI...
Skinning Your Theme
Skinning Your Theme

• Use Dreamweaver to Edit Your Theme Files.
Skinning Your Theme

• Use Dreamweaver to Edit Your Theme Files.


• Upload your Custom Images and CSS
Steps to Adapt Wordpress to Your Brand
1. Know your Brand / Brand Strategy
2. Choose a Theme that best fits the FUNCTIONALI...
Customizing the CMS - 3 Tips
1. Custom Page Templates
1. Custom Page Templates
Duplicate your page.php
1. Custom Page Templates
Duplicate your page.php

Rename it and add this to the top:
1. Custom Page Templates
Duplicate your page.php

Rename it and add this to the top:

 <?php
/*
Template Name: Custom Page...
2. Make a Static Page hold a Category
2. Make a Static Page hold a Category
Put this in your static Page Template to Query your Category
2. Make a Static Page hold a Category
Put this in your static Page Template to Query your Category

<?php $my_query = new ...
3. Make Custom Category Templates
3. Make Custom Category Templates
put this at the top of your single.php
3. Make Custom Category Templates
put this at the top of your single.php
<?php
$category = get_the_category();
$currentcat...
Steps to Adapt Wordpress to Your Brand
1. Know your Brand / Brand Strategy
2. Choose a Theme that best fits the FUNCTIONALI...
Customizing the Design - 2 Tips
“good typography
improves user experience”
1. Style Your Headlines With WP-sIFR
1. Style Your Headlines With WP-sIFR
Install the WP-Sifr Plug In
1. Style Your Headlines With WP-sIFR
Install the WP-Sifr Plug In

Use the sIFR Generator to convert your fonts
1. Style Your Headlines With WP-sIFR
Install the WP-Sifr Plug In

Use the sIFR Generator to convert your fonts

Upload and...
2. Hide or Show Comments Plug-in
2. Hide or Show Comments Plug-in
Install the Hide or Show Comments Plug In
2. Hide or Show Comments Plug-in
Install the Hide or Show Comments Plug In

Open single.php

In this file you have to repla...
2. Hide or Show Comments Plug-in
Install the Hide or Show Comments Plug In

Open single.php

In this file you have to repla...
2. Hide or Show Comments Plug-in
Install the Hide or Show Comments Plug In

Open single.php

In this file you have to repla...
thanks for coming
sara cannon

@saracannon
sara@scoutbranding.com




                         “life is short, art is long”
                ...
Upcoming SlideShare
Loading in...5
×

Wordpress and Your Brand

2,644

Published on

by: sara cannon

WordPress and your brand “utilizing WP technology to fit your brand, your look, and your goals” In this presentation I will go over different aspects of WordPress and how it applies to company branding. We will cover: – Brand Consistency – Typography tips and tricks – 5 useful recipes for customization

Published in: Design, Technology, Business
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,644
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
26
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide
  • Transcript of "Wordpress and Your Brand"

    1. 1. Wordpress and Your Brand Sara Cannon Designer/Interactive at Scout Branding.
    2. 2. Wordpress and Your Brand Sara Cannon Designer/Interactive at Scout Branding. @saracannon sara@scoutbrand.com
    3. 3. Why Use Wordpress?
    4. 4. Why Use Wordpress? • Content Management System (CMS)
    5. 5. Why Use Wordpress? • Content Management System (CMS) • Easy to Use (almost anyone can catch on how to make a post)
    6. 6. Why Use Wordpress? • Content Management System (CMS) • Easy to Use (almost anyone can catch on how to make a post) • With Training: The Client Can Even Figure it Out!
    7. 7. Why Use Wordpress? • Content Management System (CMS) • Easy to Use (almost anyone can catch on how to make a post) • With Training: The Client Can Even Figure it Out! • Search Engine Optimized (SEO)
    8. 8. But I don’t want my website to look “bloggy”
    9. 9. But I don’t want my website to look “bloggy” thats ok.
    10. 10. Adapt Wordpress to Your Brand
    11. 11. Adapt Wordpress to Your Brand not your brand to wordpress.
    12. 12. Steps to Adapt Wordpress to Your Brand
    13. 13. Steps to Adapt Wordpress to Your Brand 1. Know your Brand / Brand Strategy
    14. 14. Steps to Adapt Wordpress to Your Brand 1. Know your Brand / Brand Strategy 2. Choose a Theme that best fits the FUNCTIONALITY that you want
    15. 15. Steps to Adapt Wordpress to Your Brand 1. Know your Brand / Brand Strategy 2. Choose a Theme that best fits the FUNCTIONALITY that you want 3. Design for your Brand
    16. 16. Steps to Adapt Wordpress to Your Brand 1. Know your Brand / Brand Strategy 2. Choose a Theme that best fits the FUNCTIONALITY that you want 3. Design for your Brand 4. Skin the Template
    17. 17. Steps to Adapt Wordpress to Your Brand 1. Know your Brand / Brand Strategy 2. Choose a Theme that best fits the FUNCTIONALITY that you want 3. Design for your Brand 4. Skin the Template 5. Customize the CMS (TIPS)
    18. 18. Steps to Adapt Wordpress to Your Brand 1. Know your Brand / Brand Strategy 2. Choose a Theme that best fits the FUNCTIONALITY that you want 3. Design for your Brand 4. Skin the Template 5. Customize the CMS (TIPS) 6. Customize the Design (TIPS)
    19. 19. Steps to Adapt Wordpress to Your Brand 1. Know your Brand / Brand Strategy
    20. 20. Brand Strategy
    21. 21. Brand Strategy: Offline or Online?
    22. 22. Brand Strategy: Offline or Online? • Offline Brands: who you will meet in person
    23. 23. Brand Strategy: Offline or Online? • Offline Brands: who you will meet in person - Companies
    24. 24. Brand Strategy: Offline or Online? • Offline Brands: who you will meet in person - Companies - Stores
    25. 25. Brand Strategy: Offline or Online? • Offline Brands: who you will meet in person - Companies - Stores - Locations
    26. 26. Brand Strategy: Offline or Online? • Offline Brands: who you will meet in person - Companies - Stores - Locations • Online Brands: Brands who’s presence is primarily web-based
    27. 27. Brand Strategy: Offline or Online? • Offline Brands: who you will meet in person - Companies - Stores - Locations • Online Brands: Brands who’s presence is primarily web-based - internet services
    28. 28. Brand Strategy: Offline or Online? • Offline Brands: who you will meet in person - Companies - Stores - Locations • Online Brands: Brands who’s presence is primarily web-based - internet services - events
    29. 29. Brand Strategy: Offline or Online? • Offline Brands: who you will meet in person - Companies - Stores - Locations • Online Brands: Brands who’s presence is primarily web-based - internet services - events - products
    30. 30. Brand Strategy: Offline or Online? • Offline Brands: who you will meet in person - Companies - Stores - Locations • Online Brands: Brands who’s presence is primarily web-based - internet services - events - products - blogs/individuals
    31. 31. Brand Strategy: Online Brands
    32. 32. Brand Strategy: Online Brands • MasdenCycles.com
    33. 33. Brand Strategy: Online Brands • MasdenCycles.com • Mint.com
    34. 34. Brand Strategy: Online Brands • MasdenCycles.com • Mint.com • Wordpress.org
    35. 35. Brand Strategy: Online Brands
    36. 36. Brand Strategy: Online Brands
    37. 37. Brand Strategy: Online Brands
    38. 38. Brand Strategy: Online Brands
    39. 39. Brand Strategy: Online Brands
    40. 40. Brand Strategy: Online Brands
    41. 41. Brand Strategy: Offline Brands
    42. 42. Brand Strategy: Offline Brands • Target.com
    43. 43. Brand Strategy: Offline Brands • Target.com • PFChangs.com
    44. 44. Brand Strategy: Offline Brands
    45. 45. Brand Strategy: Offline Brands
    46. 46. Brand Strategy: Offline Brands
    47. 47. Steps to Adapt Wordpress to Your Brand 1. Know your Brand / Brand Strategy 2. Choose a Theme that best fits the FUNCTIONALITY that you want
    48. 48. Theme Functionality
    49. 49. Things to Look for in Choosing a Theme - Base Menu Structure
    50. 50. Things to Look for in Choosing a Theme - Base Menu Structure - Does my Main Menu need to be based off of Pages, Categories, or Both?
    51. 51. Things to Look for in Choosing a Theme - Base Menu Structure - Does my Main Menu need to be based off of Pages, Categories, or Both? - Sidebars
    52. 52. Things to Look for in Choosing a Theme - Base Menu Structure - Does my Main Menu need to be based off of Pages, Categories, or Both? - Sidebars - Does my brand need sidebar widget features?
    53. 53. Things to Look for in Choosing a Theme - Base Menu Structure - Does my Main Menu need to be based off of Pages, Categories, or Both? - Sidebars - Does my brand need sidebar widget features? - Front Page (index page) functions.. useful?
    54. 54. Things to Look for in Choosing a Theme - Base Menu Structure - Does my Main Menu need to be based off of Pages, Categories, or Both? - Sidebars - Does my brand need sidebar widget features? - Front Page (index page) functions.. useful? - Design Somewhat Similar?
    55. 55. Steps to Adapt Wordpress to Your Brand 1. Know your Brand / Brand Strategy 2. Choose a Theme that best fits the FUNCTIONALITY that you want 3. Design for your Brand
    56. 56. Designing Your Brand
    57. 57. Designing Your Brand • Use PhotoShop/Illustrator to Design
    58. 58. Designing Your Brand • Use PhotoShop/Illustrator to Design • Don’t constrain yourself to the Chosen Theme’s Layout.
    59. 59. Designing Your Brand • Use PhotoShop/Illustrator to Design • Don’t constrain yourself to the Chosen Theme’s Layout. • Slice Out and Optimize what needs to be images... CSS the rest
    60. 60. Steps to Adapt Wordpress to Your Brand 1. Know your Brand / Brand Strategy 2. Choose a Theme that best fits the FUNCTIONALITY that you want 3. Design for your Brand 4. Skin the Template
    61. 61. Skinning Your Theme
    62. 62. Skinning Your Theme • Use Dreamweaver to Edit Your Theme Files.
    63. 63. Skinning Your Theme • Use Dreamweaver to Edit Your Theme Files. • Upload your Custom Images and CSS
    64. 64. Steps to Adapt Wordpress to Your Brand 1. Know your Brand / Brand Strategy 2. Choose a Theme that best fits the FUNCTIONALITY that you want 3. Design for your Brand 4. Skin the Template 5. Customize the CMS (TIPS)
    65. 65. Customizing the CMS - 3 Tips
    66. 66. 1. Custom Page Templates
    67. 67. 1. Custom Page Templates Duplicate your page.php
    68. 68. 1. Custom Page Templates Duplicate your page.php Rename it and add this to the top:
    69. 69. 1. Custom Page Templates Duplicate your page.php Rename it and add this to the top: <?php /* Template Name: Custom Page Name */ ?>
    70. 70. 2. Make a Static Page hold a Category
    71. 71. 2. Make a Static Page hold a Category Put this in your static Page Template to Query your Category
    72. 72. 2. Make a Static Page hold a Category Put this in your static Page Template to Query your Category <?php $my_query = new WP_Query('cat=29'); ?> <?php while ($my_query->have_posts()) : $my_query->the_post(); ?> //insert entry formatting / calling <?php endwhile; ?>
    73. 73. 3. Make Custom Category Templates
    74. 74. 3. Make Custom Category Templates put this at the top of your single.php
    75. 75. 3. Make Custom Category Templates put this at the top of your single.php <?php $category = get_the_category(); $currentcat = $category[0]->cat_ID; ?> <?php $category = get_the_category(); $currentcat = $category[0]->cat_ID; if (file_exists(TEMPLATEPATH."/single-$currentcat".".php")) { include(TEMPLATEPATH."/single-$currentcat".".php"); } else { ?>
    76. 76. Steps to Adapt Wordpress to Your Brand 1. Know your Brand / Brand Strategy 2. Choose a Theme that best fits the FUNCTIONALITY that you want 3. Design for your Brand 4. Skin the Template 5. Customize the CMS (TIPS) 6. Customize the Design (TIPS)
    77. 77. Customizing the Design - 2 Tips
    78. 78. “good typography improves user experience”
    79. 79. 1. Style Your Headlines With WP-sIFR
    80. 80. 1. Style Your Headlines With WP-sIFR Install the WP-Sifr Plug In
    81. 81. 1. Style Your Headlines With WP-sIFR Install the WP-Sifr Plug In Use the sIFR Generator to convert your fonts
    82. 82. 1. Style Your Headlines With WP-sIFR Install the WP-Sifr Plug In Use the sIFR Generator to convert your fonts Upload and Activate!
    83. 83. 2. Hide or Show Comments Plug-in
    84. 84. 2. Hide or Show Comments Plug-in Install the Hide or Show Comments Plug In
    85. 85. 2. Hide or Show Comments Plug-in Install the Hide or Show Comments Plug In Open single.php In this file you have to replace:
    86. 86. 2. Hide or Show Comments Plug-in Install the Hide or Show Comments Plug In Open single.php In this file you have to replace: <?php comments_template(); ?> with
    87. 87. 2. Hide or Show Comments Plug-in Install the Hide or Show Comments Plug In Open single.php In this file you have to replace: <?php comments_template(); ?> with <?php hideshowComments(); ?>
    88. 88. thanks for coming
    89. 89. sara cannon @saracannon sara@scoutbranding.com “life is short, art is long” TYPE is EVERYTHING
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×