WordPress Web Design For Dummies Cheat Sheet
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 |