Learn more with dummies

Enter your email to join our mailing list for FREE content right to your inbox. Easy!

Cheat Sheet

WordPress Web Design For Dummies Cheat Sheet

From WordPress Web Design For Dummies, 3rd Edition

By Lisa Sabin-Wilson

Combining the power and flexibility of the WordPress content management system (CMS) with design and development skills (such as HTML, CSS, and graphic design programs) gives you the tools you need to create unique and dynamic Web sites.

Finding WordPress Resources and Tools

If you use WordPress as the platform for your blog or website, you can use any or all of the many tools WordPress offers. The following list helps you find some of these helpful resources.

Name Description
WordPress Plugin
Directory
Find thousands of plugins to download that let you do almost
anything you can imagine — and you can imagine quite a lot,
can’t you?
Themes
Directory
Choose from hundreds of themes to manage the look and
functionality of your home page.
WordPress Codex Try the Codex page to tap into the encyclopedia of WordPress
knowledge.
WordPress News and
Updates
Get the latest news and notes on all things WordPress.
WordPress Support
forums
Post your questions and obtain answers from the vast WordPress
community for users of the WordPress software.

Basic HTML and CSS Markup for WordPress Themes

When you work with WordPress themes to create web designs, you use basic HTML, combined with CSS styling, to accomplish the formatting and styling you desire for your website. Here’s a rundown of some basic HTML and CSS markup.

Name Description HTML Markup Example CSS Example
<head>
</head>
Indicates the header portion of a web page that contains
invisible, but vital, information about the page, such as the title
and keywords.
<head>
<title>My Web Site</title>
</head>
N/A
<body>
</body>
Defines the content area of your web page that’s visible in
your visitor’s browser window.
<body>
<p>This is my content</p>
</body>
body {background:
white; color:black}
<a href=”..”>
</a>
Inserts a hyperlink for either a word or an image. <a href=”http://google.com”>Google
</a>
a {color:blue}
<img src=”..”> Inserts an image in a web page. <img src=
“http://yourdomain.com/image.
jpg” />
img {padding 4px;
border: 1px solid
silver}
<p>
</p>
Defines groupings of text in paragraphs. <p>This text is treated as a paragraph</p> p {margin: 1.2em;
line-height: 1.2em;
color: red}
<h1>
</h1>
Defines a first-level heading, usually a title or menu heading.
You can also use h2, h3, h4, h5, and h6.
<h1>This is a title</h1> h1 {font-size:
18px; color: blue; margin: 10px 0;}

Image-Editing Software for WordPress Web Design

When you work with graphics (including digital photographs) for Web design, you work with two file types: raster and vector. When you create, edit, or manipulate those files, you use graphic- or photo-editing software to accomplish the job. Here’s a list of some software that you may want to consider.

Software Program File Types
Adobe
Photoshop
Raster-based image-editing program used to create PSD layout
files and to work with raster image file types and photography
Adobe
Illustrator
Vector-based image creation and editing used to edit vector
image files, such as AI and EPS files

Corel PaintShop Pro
Raster image and photography editing program

CorelDRAW
Vector image creation and editing for AI, EPS, and CDR file
types