Tag Archives: wordpress themes

WordPress Site Models

Featured

Posted on by
2

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 →

The Basics You Must Know About a WordPress Theme

Posted on by
12

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

Posted on by
2

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 →

How to Choose a WordPress Theme

Posted on by
Reply

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 →

Introduction to WordPress – Special Guest Panel

Posted on by
Reply

Our Introduction to WordPress class is honored tonight with five fascinating business people, each one using WordPress in different ways. This is the time to get all your WordPress questions asked and answered by WordPress users, designers, and developers, especially questions associated with your final class projects. The group represents all levels of WordPress expertise.

Kim GreenhouseKim Greenhouse is the producer of It’s Rainmaking Time!™ — Amazing Breakthroughs, Conversations, and Discoveries for Everyone, a multimedia publishing company focused on new and ancient knowledge, solutions, and discoveries – uncovering the “truth behind the news.” Recent podcast episodes include Finding Light in the Thick, Dark Fog about social inequality and cultural oppression for a small group of Native Americans, Is Something Fishy About Fish Oil? on the true impact of the fish oil supplement, A Real Life Da Vinci Code about the Chinese arriving in the Americas before Columbus, Healthy & Safe Dentistry, and New Hope for the World on Internet privacy, freedom of speech, and economics in Iceland.

dan portis-cathersDan Portis-Cathers of Deep Sea Music is an award-winning composer for film and television and a specialist in music production and sound design, and developer of computer music applications. His original music is exceptionally diverse ranging from country-western to jazz, from children songs to alternative rock and roll and funky sports themes. He’s released more than 30 albums in traditional and digital formats. Intimate Guitar Suites is his music catalog store featuring his own work and fellow artists from around the country. Dan is in the digital design, development, and marketing program at Portland State University and converting his sites over to WordPress, integrating custom JavaScript, jQuery, and AJAX scripts.

Scott KritzerScott Kritzer is a classical guitar artist and performer, touring world-wide, and a popular teacher in Portland with a large social community and fan club. He created the Kritzer Method, a master program for integrating physiology and guitar technique to promote long-term playing and hand and body health. Scott is the founder of the successful Classical Guitar Immersion Conference (CGI) bringing 20-40 guitar students and professionals from around the world together for an intensive week-long conference annually. He also developed the unique Performance Anxiety Rehab (PAR) workshop to help guitarists overcome stage fright and performance anxiety. Scott converted his static site and active forum to an integrated WordPress site (maintaining the forum) a year ago, making it easy to promote his concerts, classes, and social events as well as share his innovative teaching techniques.

Randy Sandberg of beAutomatedRandy Sandberg is the Software Test Engineer of beAutomated, a web development company specializing in building custom WordPress Plugins for the enterprise market. Their customers are small to large ecommerce and online businesses eager to automate the business process online, especially within the WordPress environment. Examples include custom email and subscription handling, database integration, ecommerce/store integration, migration, and conversion, directory development and management, and other website automation. They’ve created several popular free WordPress Plugins including Benchmark Email Lite emailing management program and beCounted, a unique Plugin that counts up (or down) annual statistics for anything you wish to count such as animal kill statistics, CMS downloads, mobile phone shipments, and the number of mythological created created since arriving on the web page.

Jeff BrockJeff Brock of Jeff Brock Studio is a long-time web designer specializing in designing on WordPress for small businesses, celebrities, and innovative enterprises around the country. He is also a professional photographer, integrating photography with digital arts. He works with beAutomated as a partner, focusing on custom wireframes and frameworks with WordPress. His company offers WordPress installation and upgrades, WordPress Theme and template design and development, WordPress Pluguin creation and modification, content customization, third-party integration, optimization, and graphic design.

Have WordPress on a Stick Installed

Aside

This week we are working on WordPress Themes. Make sure you have WordPress installed on a USB or portable hard drive. As the machines in the class are Windows, use Instant WordPress. For information on other alternatives for your laptop or home computer, see How to Install WordPress on Your Computer or USB.

How to Work with WordPress Theme Frameworks

Posted on by
5

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

Posted on by
2

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

Posted on by
Reply

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

Posted on by
5

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

Posted on by
Reply

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

What is WordPress?

Posted on by
5

WordPress logo is an open source publishing platform for the web. It allows easy content management and publishing via the web browser to the web. There are four versions of WordPress.

WordPress – Self-Hosted Version

, the self-hosted version of WordPress, is often called “dot org” or “full version.” It is the version of WordPress used by those with paid hosting services or “self-hosted.”

The is the most flexible of the WordPress versions as the user can choose from any WordPress Theme and customize it fully or create their own, and add any WordPress Plugin, script or custom code to their site. The self-hosted version of WordPress can be used by beginner or expert.

This version is appropriate for any individual or company. Continue reading →

How WordPress Boots Up: A Step-by-step Examination of the WordPress Loop

Posted on by
Reply

Theme.fm has a series of three articles on how WordPress boots up, how it moves through the process as a visitor lands on their first page on your site and a step-by-step look at the WordPress Loop.

  1. WordPress Internals: How WordPress Boots Up
  2. WordPress Internals: How WordPress Boots Up Part 2
  3. WordPress Internals: How WordPress Boots Up Part 3 – Theme.fm

As a visitor lands on a web page on a WordPress site, the browser begins the process of loading the visitor request to view a specific page. On that web page, there are codes that instruct WordPress to pull information from the site design files called WordPress Theme template files, from WordPress Plugins, from the database, and other code requests to literally build a viewable page instantly for the visitor. These articles dig deeply into how WordPress code works with all the various programs and options to generate that page.