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

1. Wordpress and Your Brand
Sara Cannon
Designer/Interactive at Scout Branding.

2. Wordpress and Your Brand
Sara Cannon
Designer/Interactive at Scout Branding.
@saracannon
sara@scoutbrand.com

3. Why Use Wordpress?

4. Why Use Wordpress?
• Content Management System (CMS)

5. Why Use Wordpress?
• Content Management System (CMS)
• Easy to Use (almost anyone can catch on how to make a post)

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. 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. But I don’t want my website to look “bloggy”

9. But I don’t want my website to look “bloggy”
thats ok.

10. Adapt Wordpress to Your Brand

11. Adapt Wordpress to Your Brand
not your brand to wordpress.

12. Steps to Adapt Wordpress to Your Brand

13. Steps to Adapt Wordpress to Your Brand
1. Know your Brand / Brand Strategy

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. 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. 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. 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. 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. Steps to Adapt Wordpress to Your Brand
1. Know your Brand / Brand Strategy

20. Brand Strategy

21. Brand Strategy: Offline or Online?

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

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

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

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

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. 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. 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. 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. 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. Brand Strategy: Online Brands

32. Brand Strategy: Online Brands
• MasdenCycles.com

33. Brand Strategy: Online Brands
• MasdenCycles.com
• Mint.com

34. Brand Strategy: Online Brands
• MasdenCycles.com
• Mint.com
• Wordpress.org

35. Brand Strategy: Online Brands

36. Brand Strategy: Online Brands

37. Brand Strategy: Online Brands

38. Brand Strategy: Online Brands

39. Brand Strategy: Online Brands

40. Brand Strategy: Online Brands

41. Brand Strategy: Offline Brands

42. Brand Strategy: Offline Brands
• Target.com

43. Brand Strategy: Offline Brands
• Target.com
• PFChangs.com

44. Brand Strategy: Offline Brands

45. Brand Strategy: Offline Brands

46. Brand Strategy: Offline Brands

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. Theme Functionality

49. Things to Look for in Choosing a Theme
- Base Menu Structure

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. 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. 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. 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. 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. 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. Designing Your Brand

57. Designing Your Brand
• Use PhotoShop/Illustrator to Design

58. Designing Your Brand
• Use PhotoShop/Illustrator to Design
• Don’t constrain yourself to the Chosen Theme’s Layout.

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. 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. Skinning Your Theme

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

63. Skinning Your Theme
• Use Dreamweaver to Edit Your Theme Files.
• Upload your Custom Images and CSS

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. Customizing the CMS - 3 Tips

66. 1. Custom Page Templates

67. 1. Custom Page Templates
Duplicate your page.php

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

69. 1. Custom Page Templates
Duplicate your page.php
Rename it and add this to the top:
<?php
/*
Template Name: Custom Page Name
*/
?>

70. 2. Make a Static Page hold a Category

71. 2. Make a Static Page hold a Category
Put this in your static Page Template to Query your Category

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. 3. Make Custom Category Templates

74. 3. Make Custom Category Templates
put this at the top of your single.php

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. 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. Customizing the Design - 2 Tips

78. “good typography
improves user experience”

79. 1. Style Your Headlines With WP-sIFR

80. 1. Style Your Headlines With WP-sIFR
Install the WP-Sifr Plug In

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

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. 2. Hide or Show Comments Plug-in

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

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. 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. 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. thanks for coming

89. sara cannon
@saracannon
sara@scoutbranding.com
“life is short, art is long”
TYPE is EVERYTHING