This document provides an introduction to building a website using WordPress. It begins with introductions and explaining why WordPress is a good platform. It then covers choosing a domain name and hosting, installing WordPress, choosing and installing themes, and the anatomy of a website including sitemaps and wireframes. It also discusses blogs versus websites, setting up pages like the homepage, using plugins, basic HTML and CSS, and getting help. The document is a beginner's guide that aims to explain all of the essential steps for designing and building a basic WordPress website.

1. Beginners
Guide to Web
Design

2. Introductions!

3. A little about me!
•Ashley Thompson
•Owner of Smash Creative Services
•I love branding, marketing, and design!
•Inc. Magazine Military Entrepreneur
•Wisconsin Native
•Military wife, puppy mom, and
entrepreneur!
•Tweet me at @smash_creative

4. Why you should listen to me
We Make Websites!
-At Smash we do Branding, Marketing, and Design
-Your website has all 3 of these elements
-Build a website that looks like your brand, is visually
appealing, and is a great marketing tool

5. Why you should listen to me

6. THE
BASICS

7. Choosing Your Platform
What is a Platform
Some common platforms
• Wordpress
• Wix
• SquareSpace
• Ning
• Weebly
Today we are going to go over Wordpress, it is also my platform of choice

8. WHAT IS WORDPRESS?
WordPress is a very popular content management system widely
used today. It was first started for blogging but has grown as a tool
to create and customize websites.

9. 7 Reasons to use Wordpress
1. SIMPLICITY
WordPress is engineered to be as easy to use as possible. A vast majority of
web servers support WordPress already, and installation is usually as easy as a
one button click. If you can do basic edits to a Microsoft Word document, you
have the skills already to edit web pages built on WordPress.

10. 7 Reasons to use Wordpress
2. MULTIMEDIA
A text-only website can get very boring very quickly. You’ll need to engage your
visitors with relevant photos, graphics, podcasts, maps, and videos. All of these
are easy to manage, import, and use, thanks to WordPress’s impressive Media
Library. Building a professional-looking photo gallery is just as easy, and you can
do it in minutes without knowing a single line of code.

11. 7 Reasons to use Wordpress
3. THEMES
The theme is the overall look of the site. It’s the colors, the layout of all the
different sections, and the navigation that takes you around the site. Themes
are easy to install (again, one-click) and there are thousands of different ones to
choose from, most of which are free. Whatever the purpose or mood of your
site, there’s a theme out there to fit it.

12. 7 Reasons to use Wordpress
4. Plug-ins
WordPress has an amazing amount of functionality right out of the box. If you
have more specific needs, the developer community has you covered.
Plugins, which are simply packaged lines of code that quickly install and work
with your existing site, help make your site more functional for your users.
There are hundreds of free plugins that can provide all the advanced
programming you need.

13. 7 Reasons to use Wordpress
5. CONTROL
It’s your website and you decide how people interact with it. WordPress has a
fully-functional user registration section which allows your visitors to maintain
their own profiles on your site. You control what level of access users have, by
group or the individual. You can even disable the whole registration system if
you choose not to use it at all. Spam controls come standard with WordPress to
keep out unwanted attention.

14. 7 Reasons to use Wordpress
6. POWERFUL BLOGGING ENGINE
WordPress started as a blogging platform. Although it’s grown far beyond that
to a fully-functional website platform, it hasn’t forgotten its roots. Your website
is only going to survive if the content on it is fresh and relevant. The blogging
engine built into WordPress allows you to effortlessly update your company’s
blog (or ‘News/Events’ section), so that your clients or customers are always
kept in the loop.

15. 7 Reasons to use Wordpress
7. EXCELLENT SEO
A website is only relevant if it can be found by your target audience. The higher
your site ranks when someone searches for it, the more likely it will be read.
Search Engine Optimization (SEO), involves properly coding your website so that
search engines like Google and Bing will find it easier, and rank it higher. The
code generated by WordPress has been engineered to give you the best SEO
possible. Matt Cutts, the senior search engineer at Google, has even mentioned
WordPress specifically as being capable of ranking higher in search results.

16. “SELF-HOSTED” vs.
“HOSTED”
And why you need to choose the right one.
WordPress has two platforms
• wordpress.com
• wordpress.org.
Choosing the right one depends on your website
needs, budget and technical skills.

17. WORDPRESS.COM
Pros of .com
• Free with domain
• Hosted by WordPress
• Fairly easy to Set-up
Cons of .com
• No plugins
• Limited themes
• Limited control
Is .com right for you?
.com is the best platform for people who want free hosting and don’t want to deal with technical aspect
of their website. With .com, you write your content but have limited control over design.

18. WORDPRESS.ORG
Pros of .org
• Thousands of plugins
• Freedom to design
• Own domain
Cons of .org
• Need hosting
• More technical
• Own spam protection
Is .org right for you?
.org is the best platform for people who want control over their website. With .org, you have the freedom
to add your brand and design a custom website.

19. HOW TO BUY A DOMAIN AND WEB
HOSTING
1.) Pick a name that helps brand your company
-keep it short and easy to remember
2.) Search to see if your name is available
3.) Register your name with websites such as register.com, domain.com or
godaddy.com

20. INSTALLING WORDPRESS
WordPress can be VERY easy to install! In fact, you can have it
installed in under 5-minutes! WordPress can be installed in the
following ways.
• 5-Minute Installation
• One click installation (some hosting websites)

21. 5-Minute (Manual) Installation
1.) Go to www.wordpress.org to download the latest version of WordPress and
unzip the contents of the file.
3.) Create a database for WordPress on your webserver.
3.) Upload the WordPress files to your webserver
4.) Enter your database information
For a more detailed version visit http://codex.wordpress.org/Installing_WordPress

22. Video to get Started!
Buying your Domain and Hosting
Installing Wordpress
http://www.tubechop.com/watch/1530272

23. 5-Minute (Manual) Installation Video
http://www.youtube.co
m/watch?v=ell0SiTZyX8

24. THEMES

25. CHOOSING A THEME
Themes are your chance to add your personality to your website. You can search
pre-existing themes within WordPress or even make your own customized theme.
Choose a theme that…
•
•
•
•
Goes with your brand
Offers the best function for your product/service
Works on all browsers
Offers a support

26. HOW TO INSTALL AND ACTIVATE
THEMES
Installing themes can seem daunting at first, but WordPress makes the process
fairly simple. WordPress comes with two available themes upon setup.
1.) First select the appearance panel followed by themes.
2.) Click on install themes
3.) Search the name of your chosen theme, click on existing theme, browse
themes, or upload your own!

27. Suggested Themes
Thesis (paid)
• drag and drop skins
• no coding required to run theme
Free Themes
If you are on a budget or still
learning your layout play with
free themes
Paid Themes
You can pay for themes that
fit your design and layout
tastes. Elegant Themes is a
great example.
Thesis Layout Example from
http://diythemes.com/

28. 2013 Theme
The 2013 theme for WordPress takes us back to the blog, featuring a full range of post formats, each displayed
beautifully in their own unique way. Design details abound, starting with a vibrant color scheme and matching
header images, beautiful typography and icons, and a flexible layout that looks great on any device, big or small.
http://www.tubechop.com/watch/1530297

29. THE
ANATOMY

30. THE ANATOMY OF YOUR WEBSITE
An important and often overlooked step to creating your
website!
Creating a sitemap, wireframe and a style board can help
with the process of choosing the right anatomy for your
website.

31. Sitemap
A sitemap is the layout is the order of
navigation on your website.
This has a lot to do with marketing. You have
to know the goal of the site and drive your
visitors to perform that action.
3-click rule-Important information should
never be more than 3 clicks away.

32. Wireframe
Creating a wireframe is basically a placement
of where you want content on your site.
Figure out what each page is going to have on
it and what elements you want to add on each
page.
But-Also find a theme that will work with your
layout. Some themes will restrict the layouts
you can have.
Or-Create a Wireframe with your theme in
mind.

33. Style Board
Designing a style board can help create a
mood for your website and save time by
collecting items to organize thoughts before
jumping into your website.

34. Color Choices

35. BLOG, WEBSITE, OR BOTH:
Picking Your Site Format
Each format has their positives and negatives. Choosing the format
depends on many factors. You want to take a look at your business and
marketing goals.
Having both is usually the best option for most businesses.

36. BLOG, WEBSITE, OR BOTH:
Picking Your Site Format
Advantages of a Blog
• Bring traffic to your website
• SEO
• Invite viewers to check often to see
if new content is added
Disadvantages of a Blog
• Upkeep
• Timely
• Finding new topics

37. BLOG, WEBSITE, OR BOTH:
Picking Your Site Format
Advantages of a Website
• Informs viewers about your
product/service
Disadvantages of a just
Website
• One-way communication
(no comments)

38. BLOG, WEBSITE, OR BOTH:
Picking Your Site Format
Why Both?
My content marketing spiel…..and Marcus Sheridan!
http://www.youtube.com/watch?v=0sv2tLYE0R0

39. DECIDING ON THE LAYOUT OF YOUR
SITE
(How Many Columns, and Where to Put Them)
The layout is the foundation (building blocks) of your website. If you
don’t have a strong foundation, the website will fall apart.
• Keep the layout consistent
• Strive for simplicity (clear and organized content)
• Be creative (think of showcasing your brand)
• Content is Key!

40. HOW TO SETUP YOUR HOMEPAGE
Posts or Static Content?
• To have your home page as a static page you need to edit your
settings.
• Static page vs blog posts page
• When would you want the blog on the first page?
• Your Homepage is your most important page-think about your call to
action.
• Important items “above the fold”

41. SEARCH BAR & SOCIAL MEDIA ICONS
Putting Them Where it Counts
• Why have a search bar
• Legality of Social Media Icons
• What Social Media should you list?
• You have to look at your website as the core of your business but
social media is where the conversations take place. Social Media will
drive people to your site.

42. Social Media is Key

43. GATHER EMAIL ADDRESSES
• Why should you have an email list?
• Use your website to grow your list.
• Adding the code to your site.
• http://www.constantcontact.com

44. INTRO TO PLUGINS
How They Work and How to Install Them
Adding plugins to your website can greatly change the way your
website functions.
To install a plugin click on
1.) administration panel
2.) plugins
3.) add new
4.) install now
5.) activate

45. INTRO TO PLUGINS
Facebook & Twitter
• Twitter no longer supports plugins
• Using Code rather than a plug-in to install Facebook and Twitter
Feeds.
• Many Facebook options!
• Like Button
• Like Box
• Recommend
• Feed

46. Yoast SEO Plug-in
http://www.youtube.com/watch?v=KQF8WP4iHec
What is SEO?
Why is it important?

47. INTRO TO HTML
& A TOUCH OF CSS

48. HTML COMMUNICATING WITH YOUR
BROWSER
How HTML tells your browser what to do with your site
• HTML is the language of the web.
• Html is created using tags. Tags generally are in pairs with an opening tag and a
closing tag.
• HTML tells your browser what it’s purpose is. For example, HTML differentiates
between a heading, subheading, and body content using tags.

49. Inspector
• Right Click and View Source to see the html of a page
• Use the Inspector-Great tool to learn and play with html

50. BASIC HTML TAGS TO KNOW
<html> html document </html>
<head> header </head>
<body> body content </body>
<p> paragraph </p>
<h1> text heading </h1>
<h2> sub heading </h2>
<strong> strong emphasis (bold) </strong>
<ol> ordered list </ol>
<form> form </form>

51. CSS STYLE RULES
CSS (cascading style sheets) can transform the look and format of your website.
Two Types of CSS Styles
• HTML Elements
-automatically applies to certain HTML tags
• Class
-applies to specific objects and content

52. USING CSS
To Alter the Look of *Anything* on Your Site
• Padding
• Margins
• Color
• Borders
• Height
• And much, much more!

53. CSS AND COLOR
A Rainbow at Your Fingertips
• Colors are created for the web using a combination of RGB (Red, Green, Blue) to
form a hexadecimal.
• The color values of the hexadecimals always start with # and have a combination
of letters and numbers to form any given color.
• Just because you have the rainbow at your fingertips, doesn’t mean you should
use all the colors. Keep things consistent with your brand.
• When choosing colors for text, opt for a color that is easy for the eyes to read.

54. Where in Wordpress you see it
• You can view the html editor within the pages of Wordpress. Sometimes knowing
the code helps with building the content within your pages.
• As you learn more you can use it to change elements in the site that the regular
options don’t let you change.

55. What if I need Help?

56. Options for Help
• Wordpress is very commonly used. There are many many videos online for any
problem you may be having.
• The Wordpress Website is a great resource.
• Keep learning! Wordpress for Dummies is a good book to reference.
• Web Designers have the ability to build a completely custom site within the
Wordpress Platform. You will still have the ability to update, they will provide the
design.
• If you need a more advanced site there are a few things to look for in a Web
Design Company

57. Hiring a Web Design Company
• If you need to take the plunge and hire a designer there are a few things to look
for.
• Will they be around for a while-I have seen many clients who had a friend or
freelancer build a site and they were nowhere to be found when updates needed
to be made
• Expertise-Designers should also have a marketing mentality. It needs to look
great and get you more business!
• Trust-Find someone you enjoy working with. It can be a long process so a great
relationship is key.
• Ask for referrals!

58. How Much Does It Cost?
• The cost of building a website is like asking how much it is to build a house.
• Set your budget and build a plan in your budget. Many designers will tell you
what is possible with your budget.
• You get what you pay for. A good company or designer may be an
investment, but could make a huge impact on the success of your business.
• Ask about SEO
• Look at their portfolio to see if their style is a fit

59. Let’s Dive In
• Let’s use this time to dive into Wordpress and start creating our site!
• Good Video that also walks through 2013http://www.youtube.com/watch?v=DxlLibzteHs