WordPress Site Models

Featured

WordPress serves as a web publishing platform and Content Management System (CMS). There are a variety of layouts and site organizational structures to choose from when setting up a WordPress site. These are known as site models.

There are three core site models: blog, static, and hybrid.

There are pros and cons to each one. Let’s look at each one.

The Static Site Model

Site model example of a static website, each page on the site a separate web page - graphic by Lorelle VanFossen.In the old days, websites consisted of static web pages, one web page for each article. Today’s CMS platforms like WordPress offer the same static feel and structure as a design decision.

The challenge of using WordPress as a static site takes a little thinking around the whole posts verses Pages and categories verses tags content organization options. In general, most static sites will never use posts only Pages.
Continue reading

How to Set and Manage Excerpts in WordPress

Example of a post excerpt on a multiple post pageview in WordPress with the continue reading link.There are three types of basic pageviews on WordPress: front page, single post or Page, and multiple posts. These are the different ways that content is presented within a WordPress site.

A single post or Page pageview shows the entire content. A multiple post pageview (multi-post) may show the full content of each post or an excerpt.

Most WordPress Themes automatically display excerpts on specific pageviews such as Archives, Categories, Author, and Search, but leave the decision to show the excerpt or full post on the front page of the site up to the user.

By default, WordPress displays the first 55 words of a post as the excerpt length.

This tutorial covers how WordPress handles excerpts. Continue reading

The Basics You Must Know About a WordPress Theme

code wordle - group of words that are synonyms and types of code.In 2005, WordPress became modular separating the design and architecture from the core programming code.

Today, a WordPress Theme contains files called template files that hold the architecture of the site and template tags, code that initiates actions within the site and data from the database. The design is applied through a stylesheet, holding the instructions for the colors, images, and look and feel of the entire site.

This tutorial covers the basics of the structure of a WordPress Theme and standard customization options.

The Structure of a WordPress Site

WordPress Example site featuring the layout basics of header, content, sidebar, and footer.Like all websites today, a WordPress site contains a background area, header, sidebar(s), content area, and footer.

The background area is considered the canvas that the site’s structural and design elements rest. It is usually a solid color, pattern, texture, or a design that does not overwhelm the rest of the content and design elements.

The header area content is set from within the WordPress Administration Panels through the Settings > General for the site title and site tagline.

The header art image is set from within the Appearance > Custom Header Image. WordPress now permits a wide range of images and image sizes to be used as the custom header image, and permits some level of cropping and positioning.

The sidebar(s) contain navigation, information, and design elements that complement the site’s purpose and content. In WordPress, this information is held in WordPress Widgets, modular content elements that can be moved around in the various sidebars, footers, and occasionally the header area. These are accessed and modified in Appearance > Widgets.

The footer is located at the bottom of the site. It usually features the name of the WordPress Theme and its author to give them credit, and the words “Powered By WordPress” with a link to or . It may also feature footer Widgets accessed through Appearance > Widgets > Footer.

The content area holds the content of the page depending upon the request of the user to view the front page, a Page, a single post, a search, categories, tags, author posts, archives, and other multiple post pageviews. Continue reading

Web Design: Tools, Color Wheels, Charts, Theories, and More on Color

Colored ball in a quilt of colors.Most business owners don’t consider the importance of color when thinking about promoting their business. They just want the colors to match their business cards or logo.

When it comes to choosing colors for your website, it can be as easy as planning the colors to paint the rooms in your house. It begins with some color theory, then pull out your old color wheel and give it a spin. Right?

Well, it would if colors on the web were that easy.

In order to understand how colors work in web design, you need to know some important concepts.

I’ve put together this summary of resources to support these and included many online free tools, color charts, color wheels, and more to help you learn more about how web colors work and how to choose colors for your web design or WordPress Theme.
Continue reading

Web Page Annotation and Markup on Live Web Pages

Teaching web publishing with HTML, CSS, WordPress, etc., and working with clients, I long for the ability to just look at a web page or PDF and draw on it. Point out what works, what doesn’t, editing notes, and somehow share it or preserve it. Or make notes. To scribble a note that says “I need to remember this” or “this is cool!”

Well you can.

HongKait offers “Top Web Annotation and Markup Tools,” a huge list of tools that allow you to annotate – write on – web pages. You can highlight sections, draw on them, doodle, whatever.

You can instantly share or save your annotations.

Think of the possibilities. You are working on a WordPress Theme with a client. They can scribble on the page making notes while you are chatting about it on the page at the same time.

Developing a WordPress Plugin? Imagine running tests with this with this level of collaboration. “What if I over it over here? How does this look to you?”

Layers is a tool that allows you to have a conversation on a web page with annotations and image shows the conversation and graphics.In one example, Layers, the tool allows you to add sticky notes, tweets, maps, videos, and images on web pages. Comments can be public or private. You can invite others to participate in an ongoing discussion of the web page to make it highly collaborative. Oh, this so is going to work out nice for students and clients.

Some of these are online apps, some are downloadable programs, and others are web browser extensions and add-ons. There are tons to choose from.

I’m going to use some of these in future classes to markup homework assignments, labs, etc. And what until my clients see these. Wow!

How to Choose a WordPress Theme

When it comes to choosing the right WordPress Theme, there is a right way and a wrong way. And both may be right for you.

First, let’s look at what people look for and what influences them in the decision process with a WordPress Theme, and the myths of their reasoning.

Comparing the same 2011 WordPress Theme - the light and the dark version - totally different.

The default WordPress 2011 Theme has two versions, dark and light. By changing the background image, these two sites on the same Theme are completely different.

How much does it cost?

First of all, the majority of WordPress Themes in the WordPress Theme Directory are free. Before you start investing in a WordPress Theme, stick with free Themes so you can test drive them.

If you fall in love with one and lack the web design experience or time to modify it, contact the author and hire them to fix this to your liking.

A paid or premium WordPress Theme is no better or worse than a free Theme. Don’t believe the hype. You are usually paying for support or additional features you may or may not need. Price does not dictate quality. Continue reading

How to Work with WordPress Theme Frameworks

WordPress Design Wordle graphicA framework is literally a frame upon which a web designer adds the design elements. A WordPress Theme frameworks is a skeletal frame set with HTML and CSS with all the WordPress code embedded within it, upon which a designer can paint the website walls.

Most WordPress designers and developers either create their own WordPress Theme frameworks or use one already created for every WordPress site they develop. It’s important for them to be familiar with all the HTML and CSS design elements so they can quickly apply the design elements, whether from scratch, wireframe, or from a Photoshop to WordPress conversion. The more you understand how a Theme framework functions, the faster the design work can be applied.
Continue reading

How to Convert a Photoshop Wireframe to a WordPress Theme

WordPress Design Wordle graphicMany use Photoshop to create their WordPress wireframe as part of designing their WordPress site. Converting the Photoshop graphic to a WordPress Theme is fairly easy if you have some basic HTML, CSS, and web design familiarity.

Simply described, each core design element such as the header, background, and design details are segmented into graphics and then used as background images or direct images where appropriate on a WordPress frameworks, a WordPress Theme with the core design elements you need to flesh the site out with a strong stylesheet.

A Photoshop (PSD) Plugin, Divine, is very popular and available for a thirty day trial. Add it to Photoshop and it will automatically help you export the graphic elements for a WordPress site. Familiarity with WordPress functions, features, and Theme structures and styles are required to complete the process, but it does help with the export of the graphics for the Theme. It works with Windows XP, Vista, and 7. Currently, there are no free programs for the Mac, but some alternatives are available with free, limited trials. [NOTE: Since 2009, all marketing about the Divine Photoshop Plugin explicitly says it is "absolutely free." I just learned it has a thirty day trial and then it is expensive to purchase. While it might seem to be the ideal thing to try, unless you are making a living as a web designer, it's not worth the cost.]

In general, while the Divine Photoshop Plugin is helpful, you can generate the graphics yourself. For more information on how to take a wireframe Photoshop image and convert it to a WordPress Theme, try these resources.

How to Create a WordPress Theme Wireframe

WordPress Design Wordle graphicWireframes are website mockups, prototypes, layouts, and doodles. For many, wireframes begin with with pen and paper, others use sticky posts and crayons. More technically inclined folks turn to graphic and design software and web apps to layout the look and feel of a site for themselves or a client.

Wireframes are essential in the process of getting ideas down and the site design fleshed out. They are also critical for working with clients to ensure the designer/developer and the client are on the same page.

However you make your wireframes, make sure they are flexible and easily altered as your site evolves.

A Google search for WordPress and wireframe images turns up some excellent examples.

Here are some articles featuring wireframe tips and resources.

Example of a Sandbox Post for Testing WordPress Themes

This is the H1 Heading

This is an example of a sandbox post for testing WordPress Themes and web page designs to ensure every design detail within the content area of a Theme meets with your design needs.

To use this sandbox post for your own testing, right click the following link and save the file as a text file. Open it within a text editor and select all of the text and paste it into your WordPress site with the HTML/TEXT editor – not visual editor. Save the post or publish it to view the post content designs.

This is the link to the sandbox post text file.

This sandbox post is available for free. Use as you wish.

At the top of this paragraph should be the H1 heading for your web page. If it is not visible, the design settings for the H1 tag is set to display:none which many WordPress Themes use to hide the blog title text and replace it with a graphic. Do not use H1 within your blog post area.

If the design in the H1 heading looks like your blog title or blog post title, then that is the style set for that HTML tag and you should not use it within your blog post area.

Inside of this test data section are most of the basic HTML and XHTML and CSS styles that you might use within your WordPress Theme. You need to know what that will look like as part of structuring your styles.

This is the H2 Heading

Above this paragraph should be the H2 heading for your web page. WordPress Themes use the h2 heading for various purposes. Logically, it should be either the post title or the first heading in the post content.

However, it is used all over WordPress Themes including the subtitle, tag line, post title, comment area, sidebar area, and even in the footer. Be specific when styling each h2 headings to ensure you are not styling all of them.

This is the H3 Heading

Is this the same heading as is in your post title or is this the section headings found within your sidebar? Or is it different? This is the post content heading for the HTML tag h3, as is the one below, H4, for section headings within your post to divide up topics. If there is an H3 or H4 tag in your sidebar, you will need to identify the parent HTML and CSS container for the sidebar and style those appropriate in your blog’s stylesheet.

For more information in searching for your styles in your WordPress blog, see CSS: Studying Your CSS Styles.

Also notice how the links in that paragraph are styled so you can style links within your post content area. Links have three styles. There is the link color, link hover color, and visited link color. Be sure and design for each style.

This is the H4 Heading

In this section under the H4 heading, we’re going to look at what the post content, the meat and potatoes of your site looks like. In general, you will have multiple paragraphs, so we will add another paragraph so you can adjust the spacing in between them to the look you want.

Paragraphs are not just for typing your blog babble, they can also hold frame and hold other information within your content area to help make the point you want to make in your writing. For instance, you will commonly have three types of lists.

Continue reading

Developing WordPress Plugins and Themes for the Public

WordPress code logo thumbnailThe following resources are for those who develop WordPress Plugins and WordPress Themes and wish to release them to the public and include them in the WordPress official directories, WordPress Plugin Directory and WordPress Theme Directory.

It is highly recommended that you read “A Love Letter to WordPress Plugin Authors” with tips for WordPress Plugin and Theme authors on how to ensure your audience finds your WordPress goodness.

WordPress Plugins Submissions

WordPress Theme Submissions

Working as a WordPress Developer

Selling WordPress Themes