bCreative – Graphic Design & Web Boutique

Jun 19
2011


So you got an inkling of a business idea that morphed almost overnight into an obsession. You know you’ll need a bunch of advertising and marketing “stuff.” A logo. A website. Posts on Facebook, Twitter and a blog. Maybe a white paper or two, plus traditional news releases, marketing collateral and, possibly, a trade show display.

OR – Are you are an overloaded agency that needs a reliable firm to help take-up the slack?

Now, trust is an issue. Who can you trust to interpret what’s in your head so that it remains to true to your concept and has impact? And, this, for a price you can afford?

Take a look at bCreative – Graphic Design & Web Boutique.

logo vector bCreative  – Graphic Design & Web Boutique

This Ohio-based one-stop shop is crafting some outstanding work. Their graphics and web design have clients raving and the news is spreading fast. The talent line-up matches, if not surpasses, what you’d get at a big agency. They deliver when they say they will, and they will impress you time and time again. Check out their portfolio here.
Contact bCreative – Graphic Design & Web Boutique for all of your creative agency needs.

About Us vector bCreative  – Graphic Design & Web Boutique

Services include:

graphic design  :   corporate identity  :   marketing collateral  :   print ads  :   outdoor  :   web design  :   e-commerce  :   blog design  :   programming  :   social media  :   html email marketing  :   seo  :  ad specialty items  :   press releases

and … whatever you can dream up!

Related posts:

  1. Respiro Media – A beautiful Design Agency
  2. New design for Web Design Blog
  3. 22 Sites for Free Graphics Design Tutorials


Support Creativity! Buy me a coffee



© 2007 - 2010 Web Design Blog, 2011. | Permalink | No comment
Post tags: , , , , , , , , , , ,

What Everybody Ought to Know About Making Changes Count

Mar 31
2009

What Everybody Ought to Know About Making Changes Count

Photo by Zachstern*

People who rate themselves as intelligent have a 47 percent higher need for change in their professional world. They regularly see possibilities and opportunities around them. (1)

Change is great, we should always be trying to make little improvements in not just our blogs, but everything in our lives. As always though too much of a good thing can be a very bad thing, especially in the case when changes are made just for the sake of change. Often times these types of changes are made purely out of boredom and not exactly with the purpose of making it better. 

Change made just for the purpose of making a change in order to make things more interesting is not always a bad idea either. You might come across something that really works that you never would had normally tried. Nether less in order to make your changes count it is important to keep a few things in mind when making them.

Make sure the change will actually do what you want

It sounds silly to even bring it up, after all why would you even bother in the first place with a change unless you actually thought it would do what you want? The problem is that sometimes when we are making changes, we are actually only tinkering around in the shadow of a much bigger problem that we cannot see because we are so focused on little problems. This phenomenon is often referred to as tunnel vision.

For blogs, it is like working on making changes on your sidebar to improve your RSS subscribers count, when the bigger problem is how you are marketing your blog. You could have the most awesome sidebar ever, usability - check, design - check, content - check, but no visitors besides a few people who got lost looking for something else. 

Ask yourself, if the change you are going to make really going to solve the underlying problem? If it isnt, then dont do it. Make changes that count and prioritize them. There are always more things to do in our lives than we have time to do. 

Measure where you currently are

The reason it is important to measure where you currently are is in order to have a starting point that you can measure against after you have made the change in order to see if the change is effective. If you make a change, but have no way of keeping track of if the change actually did anything, then you really have no idea if the change was for better or worse.

For blogs, the equivalent could be measuring your current RSS subscribers, average page views, or even the number of times visitors click on a certain link. That link could be your services page or something else that is vital for the success of your blog. 

Whatever change you are making, pick a measurement that is meaningful for you or at the very least a measurement that will indicate whether or not you are actually progressing. Measuring how many hits you get doesnt really help you that much if all that is important to you is how many people actually contact you. Dont get me wrong, it is still a helpful measurement, but focus on that numbers that really matter for you. Ask yourself, what has to happen for the change to be considered a success for you?

Measure your progress weekly

You could measure everyday, but that is just going to drive you insane no matter what you are doing. Depending on the changes you are making, it might even be better to measure bi-weekly or even monthly. Daily measurements will just have you riding on an emotional roller coaster no matter what changes you are trying to make.

When I was trying to lose weight, I use to drive myself nuts weighing myself everyday. I would feel happy if it went down, but if it went up or didnt change I would be grumpy for the rest of the day. It was very unnecessary considering that it is normal to fluctuate up to four pounds in one day. Now, I measure weekly, but I take it with a grain of salt as I find biweekly measurements to paint a better overall picture as to what is happening.

In blogs, you have the same situation where the number of RSS subscribers will fluctuate everyday. Just because that change in your layout or that new article on X topic didnt give you immediate results doesnt mean it isnt working. Stick with the change you made and keep track of your progress.

Reassess the change that you made

After you have got enough measurements it is a simple matter of deciding whether or not the change that you made was effective in solving your particular problem. If it worked out well, keep working in that direction. 

If it didnt work as well as you thought it would, figure out what went wrong. Ask yourself as many questions as it takes to figure it out. Did you make the wrong change? Was it successful but it solved the wrong problem? Did you use the wrong measurement? Or perhaps did you not give it enough time to actually see a change? Or did you not have enough information to make the change?

Conclusion

In the end, the whole process of change is really an experiment that you conduct in order to see if what you changed actually is for the better or worse. Experiment, make changes that count, and prioritize them. There are always more things to do in our lives than we have time to do. 

Also remember to write down what works and what doesnt. There is an odd phenomenon where people sometimes stop doing what works and keep doing what doesnt work. It is more common than you think.

1. Whatley, A. 1998. “Gifted Women and Teaching: A Compatible Choice?” Roper Review 21:117-24



Hire me!


Hi, my name is Vinh Le. Thanks for reading my article. If you are interested in the blog design services that I offer, please check out my services page.

Related posts:

  1. Making a blog design visually interesting (2) – Adding in the details Making a blog design visually interesting (1) - Getting...
  2. Making a blog design visually interesting (1) - Getting started Creating visually interesting blog designs is an art. And as...
  3. 10 Reasons Why Your Blog Design Will Never Be Done “You are either progressing or regressing. There is no...

3 Things to Remember When Designing a Blog Footer

Mar 24
2009

blog design footer

Photo by LA Wad*

Introduction

This is a guest post by Skellie from http://www.skelliewag.org. Check out her blog for articles on how to use blogs as platforms for profitable online businesses and a great reputation.

Blog footers have traditionally been neglected by designers, usually home only to the obligatory copyright line. Times are-a-changin’ though. Creative footers have become one of the hottest trends in web design, and blog footers are no exception.

It’s not hard to see why. A visitor who reaches the bottom of a web page and finds themselves without anymore content left to browse is at the point where they are most likely to wander away. Blog footers help capture and maintain the interest of the visitor who thinks they’ve seen everything. But they have to be done well. Here are three key things to remember when designing a blog footer.

1. Attention decreases from top to bottom

When a user visits a website, the first thing they see is the top area: the header, the top of the sidebar, and usually some of the content. This is the highest attention area of any design. As the user travels down the page, they need to be kept interested. The likelihood of boredom or distraction increases as the user travels downwards through the design.

They might see a blog post they want to read, or a link they want to follow. They might just decide that the blog isn’t for them. Because of this, most visitors to a blog will never make it to your footer. This means that if there is something you want every visitor to see–whether it’s your navigational menu or the icon for your RSS feed –it should go in the highest attention area of your site: the top area.

2. Your footer is not a navigation bar

Following on from section 1, you should not put ‘must use’ elements of the design in its footer unless they also appear in a high attention area. For example, if your ‘Contact’ page is only accessible through your footer–one of the most common usability errors you’ll see in modern web design–you’re drastically increasing the chances that someone who wants to contact you will lose patience trying to do so. They may never think to look in that area and simply won’t see the link. This can lead to missed opportunities and frustration for blog readers.

Putting a ‘Contact’ page link in your footer is fine, however, when you’ve linked it again in a high attention area. Having navigation at both the top and bottom of your blog will improve its usability, since putting links at the bottom of your page makes sense–once a reader has reached the bottom, they’ll probably want to explore another part of your blog.

3. Keep it interesting!

Blog footers are a great opportunity to surprise and delight those who find them. For years the website footer almost had to be boring. At most, you could expect to find copyright information and a contact link. The nether regions of a blog were to be avoided.

Now, designers are beginning to appreciate the opportunity to go against expectations. I’ve seen blog footers featuring funny quotes, interesting links, portfolio items, illustrations and top posts. These are the best kind of blog footers because they keep users entertained at a key point when they would be most likely to navigate away from a site. Don’t use a blog’s footer as a place for basic features like navigation. Instead, do something interesting and novel that will keep visitors interested!

Conclusion

As a designer, the best way to develop your skill with blog footers is to bury yourself in examples that work. Here are a few great places to start!



Hire me!


Hi, my name is Vinh Le. Thanks for reading my article. If you are interested in the blog design services that I offer, please check out my services page.

Related posts:

  1. Designing a better blog In order to redesign my blog, over the past few...
  2. How to Design a Better Blog and Make More Money Why is Your Blog Design Important to Your Blog's...
  3. How to Blog Design Style Guide Introduction When designing blogs I noticed there are a...

The Secret to a Great Blog Redesign

Oct 31
2008

Photo by Melisande*

Introduction

The secret is that you don’t have to hire an expensive blog designer to have a great blog redesign. While it certainly helps and makes the process much easier if you had one to work with, it would still be your responsibility in order to set the overall guidelines for the blog redesign. You need to have a direction when working towards a redesign of your blog. Without any direction you will just end up with a prettier blog (hopefully), which is fun, but does not guarantee that it will make your blog any better.

A great blog redesign starts with a plan. In order to put together a plan for your redesign, you must first reassess your goals, then figure out how well your blog is meeting your goals, and finally asking yourself whether the current design is helping your blog achieve your goals.

Let your goals guide your redesign

If you have ever tried to redesign your blog or anything for that matter, you have probably found your progress halted to a stop by little details such as does this blue or that green look better? This happens when you don’t have goals to guide your overall efforts. Little details will bog you down and slow your progress and even sidetrack you completely from the actual purpose of your redesign. The importance of the answer to whether that blue or green looks better pales in comparison to the answer for the question of whether this change will help you make more money, get more subscribers, or increase page views.

Making visual changes just for the sake of change itself will result in a prettier blog, but that does not necessarily mean a better blog. You can actually make it worst if your redesign is not built with your goals in mind. You can’t hit a target you cannot see.

Just like social media and SEO, your blog design is a tool, a means to an end and not the end in itself. Reassess your goals and allow them to guide your decisions when redesigning your blog. The following are some great resources to help you get started on figuring out your goals and reassessing your current ones:

List of resources

How well is your blog meeting your goals?

This is not about whether or not your current blog design is helping you achieve your goals, because that is the next step. This is about whether or not your current blog is where you want it to be. Is it giving you the exposure that you want? Is it getting you more clients and leads? Are you building a bigger network in which to spread your ideas around?

The answers to these questions will help you determine the goals for your blog redesign. This is different from the goals for your blog as this focuses solely on what you want the blog redesign to be able to accomplish in the end as a result of the blog redesign and nothing else. Increase page views? Get more subscribers? Decrease bounce rate? Increase discussions? Get more leads/clients?

List of resources

Is your blog design helping you achieve your goals?

In order to figure out whether your blog design is helping you or not, you must really take a second look at your blog design. After that, take another 3-4 looks, seriously. As humans our brains are programmed in such a way that information that doesn’t change much, often just gets ignored completely by our mind even if we see them everyday. This is why we can do something everyday and not notice something until someone points it out to us or for some reason we were forced to pay attention to it. So when was the last time you really took a look at the design of your sidebar, footer, headlines, or comments?

If you are like most people, it was probably a long time ago. And who can blame you, as bloggers we get caught up with writing the next best article, promoting the crap out of it in social media outlets, and figuring out other methods to achieve our goals that we end up overlooking our own blog design. We no longer see the widgets we stuffed into the sidebar at the last minute, the links that no one ever clicks on in the footer, or that hideous rss button in the corner. Everything becomes a blur and your blog design suffers because it certainly doesn’t get better on its own.

So how do you figure out whether or not a blog design is helping you achieve your goals? It is pretty simple, as you go through your blog design keep in mind that any visual element that is not helping you achieve your goals is hurting it.

Conclusion

In the end, you should have a much better plan and direction for your blog redesign. Whether you take this to a blog designer or do it yourself does not matter as the end blog redesign will be that much better now that you invested time into a solid plan. If you are doing it yourself, then the next article is for you. It will focus on how to approach the redesign process after you got a plan.



Hire me!


Hi, my name is Vinh Le. Thanks for reading my article. If you are interested in the blog design services that I offer, please check out my services page.

Related posts:

  1. The Secret of Great Blog Designs What is the purpose of a blog design? There are...
  2. 47 Must See Great Blog Designs This is a snippet of what is inside the blog...
  3. 10 Reasons Why Your Blog Design Will Never Be Done “You are either progressing or regressing. There is no...

37 Ways to Design the Comments Form

Oct 17
2008

If you are a regular reader here, you know that I put a lot of emphasis on paying attention to blog design elements that usually don’t get much attention at all like comment designs. The comments form is another one of the blog design elements that usually ends up getting rushed at the end. There really is no right or wrong way to design a comments form as long as you pay attention to basic usability guidelines. The following are 37 ways other blog designers have designed their comments form:

1. 404 User Experience Design

404 User Experience Design - Comments Form Design

2. Adii

Adii - Comments Form Design

3. Renaissance

Renaissance - Comments Form Design

4. Avalonstar

Avalonstar - Comments Form Design

5. Bartelme

Bartelme - Comments Form Design

6. Carlos Leopoldo

Carlos Leopoldo - Comments Form Design

7. coda.coza

coda.coza - comments form design

8. Creattica Daily

Creattica Daily - Comments Form Design

9. CSSAddict

cssaddict - comments form design

10. Mancub

Mancub - Comments Form Design

11. Darren Hoyt

Darren Hoyt - Comments Form Design

12. Design Disease

Design Disease - Comments Form Design

13. Design Intellection

Design Intellection - Comments Form Design

14. Edmerritt

Edmerritt - Comments Form Design

15. Elitist Snob

Elitist Snob - Comments Form Design

16. Elliot Jay Stocks

Elliot Jay Stocks - Comments Form Design

17. greg-wood.co.uk

greg-wood.co.uk - comments form design

18. High Resolution

High Resolution - Comments Form Design

19. ifoh designs

ifoh designs - Comments Form Design

20. Jesus Rodriguez Velasco

Jesus Rodriguez Velasco - Comments Form Design

21. KISSmetrics

KISSmetrics - Comments Form Design

22. Kulturbanause

Kulturbanause - Comments Form Design

23. La Privata Repubblica

La Privata Repubblica - Comments Form Design

24. lotus from the mud

lotus from the mud - Comments Form Design

25. Lucy Blackmore

Lucy Blackmore - Comments Form Design

26. MonsieurLam

Monsieurlam - Comments Form Design

27. Natalie Jost

Natalie Jost - Comments Form Design

28. Noupe

Noupe - Comments Form Design

29. Oaktree Creative

Oaktree Creative - Comments Form Design

30. Ordered List

Ordered List - Comments Form Design

31. pixelgraphix

pixelgraphix - Comments Form Design

32. Playground Blues

Playground Blues - Comments Form Design

33. Chris Shiflett

Chris Shiflett - Comments Form Design

34. Smashing Magazine

Smashing Magazine - Comments Form Design

35. Tim Kadlec

Tim Kadlec - Comments Form Design

36. Wilson Miner

Wilson Miner - Comments Form Design

37. Yanko Design

Yanko Design - Comments Form Design

Conclusion

Now go make your comments form that much better or sexier. I know I need to and that is why I am currently taking a second look at my own blog design. A redesign is coming in the future, along with an article about the whole redesign process.

Subscribe today by RSS for free and get more great blog design tips and lists. If you don’t know about rss feeds or you want to use the email subscription option, read this page on subscribing to Blog Design Blog.



Hire me!


Hi, my name is Vinh Le. Thanks for reading my article. If you are interested in the blog design services that I offer, please check out my services page.

Related posts:

  1. 5 Simple Ways to Make Your Blog Design POP In "The Secret of Great Blog Designs," I talked about...
  2. 5 Ways to Make Your Blog Design Unforgettable Introduction A big problem with blogs these days is...
  3. 30 More Must See Comment Designs for Blog Designers I am fascinated by the details in a blog design...

Designredux Free WordPress Theme Updated to Version 0.2

Oct 14
2008

Designredux Free WordPress Theme

3 weeks after the release of version 0.1, I have finally added all the finishing touches for version 0.2 of Designredux, and it is still free. The live demo has been updated with the latest version for your viewing pleasure. Visually there has only been minor changes to the overall design. They were just little tweaks here and there to improve the look. A few odd bugs were fixed as well.

Most of the changes though are in the back end. Most notably the addition of a custom admin panel, custom pages, and it is now widget-ready. The following are the list of changes made.

Custom Admin Panel

Designredux Free WordPress Theme - Custom Admin Panel

Most of the work was done here. And most of the work means a lot of work. In order to maximize the use of the WordPress theme in version 0.1, it required you to go into the code and make some changes. With the creation of the custom admin panel, that is no longer necessary.

Navigation

In version 0.1, the navigation on top of the theme displayed all the categories as links.  This was obviously going to be a problem when there are too many categories or you don’t want to display every single category there. In order to fix that, I created an admin panel for the navigation so you can now pick which category you want displayed. You can pick as many or as little as you want.

Bottom right of the footer

This area required the edit of the about_text.txt file in order to make changes to its content in version 0.1. Now you can just change it from the admin panel and you can also change the title for that area.

Feedburner

Efforts have been made in this area to make it easier to add your feedburner account and activate subscribe by email without having to edit the code yourself. If you don’t have a feedburner account, it will just default to WordPress’s rss feed.

Google Adsense

Easy integration of Google adsense is now available for the sidebar and post’s footer. All you have to do is paste the code in the admin panel. I also designed it so the integration of google adsense will look nice. But it does require that you set your Google adsense to use #EEEEEE as the background and border color or else it will look sloppy You don’t have to, but your efforts will be rewarded. Check out the demo to see what I mean.

Google Analytics

Just paste google analytics code into the admin panel and you are done. No need to edit.

Documentation

Added a section to explain everything in the settings below the admin panel.

Custom Pages

Designredux Free WordPress Theme - Custom Search Page

Version 0.1 had no custom pages so these were added to cover the basic types of pages found on blogs.

Search.php

In the absence of a search.php file, WordPress uses the index.php to decide how to display the results. Not the best idea so I created the search.php so that the search results look nicer.

Page.php

Again WordPress used the index.php to decide how things looked when pages were displayed when page.php is missing. Now regular pages look much better.

404.php

The page you get when someone gets lost on your blog.

Archives.php

The archives page needs to be activated by creating a page in WordPress, you can call this page anything you want, a good name is Archives. Then go to the page templates section of the page and choose “Archives” in the drop down menu. That’s all you have to do.

Conclusion

A lot of work has already been done on this theme, but there are more coming. More tutorials will continue to roll out soon on how to take this theme to the next level. If you have any requests or ideas, please feel free to leave a comment, send an email, or tweet me on twitter about it.

Subscribe today by RSS for free and get more great blog design tips and lists. If you don’t know about rss feeds or you want to use the email subscription option, read this page on subscribing to Blog Design Blog.



Hire me!


Hi, my name is Vinh Le. Thanks for reading my article. If you are interested in the blog design services that I offer, please check out my services page.

Related posts:

  1. Designredux 0.1 Free Wordpress Theme Released Name: Designredux (Don't you just love my theme names)...
  2. How to Disassemble a Free WordPress Theme Part 2 In this article, I am going to go over...
  3. How to Disassemble a Free WordPress Theme Part 1 Most articles on Wordpress themes focus on building a...

How to Design for Ads in Blog Design

Oct 10
2008

How to Design for Ads in Blog Design

Introduction

Anyone who has been reading blogs for than a few days will notice that there are two common types of ads in blogs. Those two types are Google adsense, which is essentially a bunch of text with links and banner ad blocks, which often comes in the size of 125 x 125. Then there are three places it often gets placed, the sidebar, inside of a post, or at the bottom of a post.

Advertisements are a nice way of making money with blogs, but where it often goes wrong is the implementation of these ads into blog designs. Most blogs tend to just stick the advertisements right into the blog design without a second thought. This often results in making the blogs distracting, ugly, and less usable. But this does not have to be the case, there are many ways of integrating ads into blog designs without making it worst.

There is pretty much nothing you can do about the design of the ads themselves, besides rejecting the advertisers, which will only end up hurting your earning potential. Therefore the only thing you can do is to ensure that the integration of the ads into your blog design is done well.

1. Give the ads their own real estate

Noupe

By creating separate real estate for the ads, it makes it clear that they are separate from the actual content of the site itself. This makes it easier for your readers to navigate and use your blog.

An easy way of doing this is to group the ads into a separate container or area of the blog and styling them different from the rest of the blog. Noupe did this in the above example by making the background color for the ads different. You could also try creating a thick but subtle border around the ads.

2. Label the ads as ads

WebDesignerWall - Inline Post Ad Design

Why bother labeling ads? Because it makes it easy for the reader to know that they are ads at a quick glance. Also by labeling the ads as ads, this decreases the likelihood that the readers will confuse the ads as actual content of your blog.

Ads in the sidebars usually don’t need labels because the sidebar is already separate from the content, but the labels are still helpful. Ads inside of posts should always be labeled as ads, because it is more likely that the reader will confuse them with actual content and get distracted.

An easy way of labeling ads inside of posts is by creating tabs that say “Advertisement” as WebDesignerWall has done above. Simple and to the point, it doesn’t need to be fancy at all.

3. Design for content over ads

Macalicious - Google Adsense Design

In any blog design, there is a hierarchy of elements with varying levels of importance. In general, it is a bad idea to make it so that advertisements appear to have a greater level of importance over your actual content. When you make ads appear more important in your design, it shows the reader how little you value your own content. If it seems like you don’t value your own content and just want to make some quick money, your credibility will drop. Along with your credibility, it decreases the chance that the reader will actually read through all of your content because the ads will be distracting.

Basically what I am saying is that anytime the ads are too distracting or taking way too much attention away from your actual content, then you are designing with ads over content in mind. Ads are often already jumping off the page, there is no need to add to that. Macalicious does a great job of designing with content over ads in mind with their blog design.

Conclusion

As you can see from the above examples, advertisements don’t have to be ugly or distracting. Now that you don’t have any more excuses, make those ads pretty!

Subscribe today by RSS for free and get more great blog design tips and lists. If you don’t know about rss feeds or you want to use the email subscription option, read this page on subscribing to Blog Design Blog.

Further Reading

1. For more on blog design, check out my massive guide on Blog Design.

References

1. Top picture is by Steve Webel



Hire me!


Hi, my name is Vinh Le. Thanks for reading my article. If you are interested in the blog design services that I offer, please check out my services page.

Related posts:

  1. How to Blog Design Style Guide Introduction When designing blogs I noticed there are a...
  2. Five Blog Design Mistakes that Make You Look Dumb Blog design rules are not set in stone by...
  3. Making a blog design visually interesting (2) – Adding in the details Making a blog design visually interesting (1) - Getting...

How to Disassemble a Free WordPress Theme Part 2

Oct 08
2008

How to Disassemble a Free WordPress Theme Part 2

In this article, I am going to go over the rest of the files in the Designredux WordPress theme before we go on to adding extra features, scripts, and custom pages to the theme. Check out How to Disassemble a Free WordPress Theme Part 1 if you missed it.

The files that this article is covering are comments.php, single.php, functions.php, and style.css.

Comments.php

Comments.php - Designredux - Free WordPress Theme

The comments contains everything required for the comments to function. This includes the comments itself, the comments form, and various checks that do different things depending on the settings set in WordPress.

1. Some pre-flight checks

if ('comments.php' == basename($_SERVER['SCRIPT_FILENAME']))

 die ('Please do not load this page directly. Thanks!');

Checks to see if the comments.php is loaded directly into the browser. If it is being directly loaded, it will stop loading and display the message within the die() function. Comments don’t work outside of the WordPress Loop so it would be pointless to load it directly.

if (!empty($post->post_password)) { // if there's a password

 if ($_COOKIE['wp-postpass_' . COOKIEHASH] != $post->post_password) { // and it doesn't match the cookie

                <p class="nocomments">This post is password protected. Enter the password to view comments.<p>

<?php return; }}?>

Checks to see if a password is set for the post. If a password is set, it will stop the post from being displayed and instead display an input box where you can enter a password in order to see the post.

<?php if ($comments) :?>	<ol id="comments_list">

 	<?php $comment_index = '1'?>

                <?php foreach ($comments as $comment) : ?>

 		//fun stuff inside foreach loop

                <?php endforeach; ?>

Checks to see if there are comments before it begins the process of churning out all the comments. Then it sets $comment_index = ‘1′ in order to be used later for displaying the comment’s number. Only after all that does it begins the foreach loop which will go through every comment one by one and do everything inside the loop.

2. Inside the comment’s foreach loop

<?php $comment_type = get_comment_type(); ?>

<?php if ($comment_type == 'comment') { ?>

        //fun stuff

<?php } else { $trackback = true; } ?>

The first line gets what type of comment it is. There are three types of comments you can get. The three being regular comments, trackbacks, and pings. The reason for checking this is to separate the comments from the trackbacks and pings so it can be organized better. After getting the type, it checks to see if it is a regular comment. If it is a regular comment, then it does all the fun stuff after that. But if it is not a regular comment, it just sets $trackback to true, which tells us that there are trackbacks/pings in this post.

<li class="<?php if (1 == $comment->user_id) { ?>comments_author <?php }; ?>

        <?php if ($comment_index % 2 == 1) { ?>odd<?php }; ?>" id="comment-<?php comment_ID() ?>">

The first line checks to see if the commenter is an author by checking to see if its user id is equal to 1. If it is then it adds the class “comments_author” to the <li> tag so it can be styled differently from the other comments. The second line checks to see if the comment’s number for that comment is odd, if it is then it will add a class of “odd” so it can be styled differently from the even comments for easier reading. <?php comment_ID; ?> just adds the id for the comment.

<span class="comments_index"><?php printf("%03d", $comment_index); $comment_index++; ?></span>

The printf() function is used to format the comment’s number for display. The format in this case being defined by “%03d”, which just means it has to be outputted as 3 digits and if it isn’t already in 3 digits format then add leading zeros until you get 3 digits. That is why it comes out as 001 and 002 instead of 1 and 2. $comment_index++ just adds one more to the index so the next one will be 2, 3, 4, etc.

<?php if ($comment->comment_approved == '0') : ?>

 <em>Your comment is awaiting moderation.</em>

<?php endif; ?>

The first line checks to see if you have set comments to be approved before displaying in the settings of WordPress. If you have it set to be approved first, then it will just give a message to the commenter that it is awaiting moderation.

3. Trackbacks and pings

<?php if ($trackback == true) { ?>	<h3>Trackbacks</h3>

<ul id="tracksbacks">

 	<?php foreach ($comments as $comment) : ?>

 	<?php $comment_type = get_comment_type(); ?>

 	<?php if($comment_type != 'comment') {?>

 		<li>

 			<?php comment_author_link(); ?>

 		</li>

 	<?php } ?>

 	<?php endforeach; ?>

 </ul>

<?php } ?>

The first line checks to see if there are any trackbacks or pings. If there is, then it will display them by using a foreach loop again. This is pretty straightforward after having gone through the comment’s foreach loop. This time you just display a link to the trackback/ping if they are not regular comments.

4. If there are no comments

<?php else : ?>

        <?php if ('open' == $post->comment_status) : ?>

 <?php else : // comments are closed ?>

 	<p class="nocomments">Comments are closed.</p>

 <?php endif; ?>

<?php endif; ?>

If there are no comments for this post, it will do what is after the <?php else: ?> and before <?php endif; ?>. The second line pretty much just checks to see the status of the comments. If the comments are open, but there are no comments it doesn’t do anything. But if the comments are closed it will say so.

5. Pre-flight checks before displaying the comments form

<?php if ('open' == $post->comment_status) : ?>

 <?php if ( get_option('comment_registration') && !$user_ID ) : ?>

 	<p>You must be <a href="<?php echo get_option('siteurl'); ?>/wp-login.php?redirect_to=<?php the_permalink(); ?>">logged in</a> to post a comment.</p>

<?php else : ?>

Before we can display the comments form, we have to check if the comments are open or not and that is what the first line does. Now if it is open, but the settings in WordPress is set so that only registered users can comment then it will force you to login if you haven’t already done so. If all the conditions are satisfied, the conditions being comments are open and you are logged in if required to do so, then the comments form will be displayed.

6. Comments form

<form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform">

Sets the action of the form to the wp-comments-post.php file, which will process the form.

<?php if ( $user_ID ) : ?>	<p class="comment_status">Logged in as <a href="<?php echo get_option('siteurl'); ?>/wp-admin/profile.php"><?php echo $user_identity; ?></a>. <a href="<?php echo get_option('siteurl'); ?>/wp-login.php?action=logout" title="Log out of this account">Logout »</a></p>

<?php else : ?>

Checks to see if you are logged in. If you are logged in, it will tell you so and also give you an option to log out if you want to.

<label for="author">Name <span><?php if ($req) echo "*"; ?></span></label>

<input type="text" name="author" id="author" class="text" value="<?php echo $comment_author; ?>" size="22" tabindex="1" />

<?php if ($req) echo “*”; ?> checks to see if the settings in WordPress is set so that it requires the user to fill out their name and e-mail. If it does require it, then it will display * next to the field. <?php echo $comment_author; ?> fills in the user’s name if they are registered, but if they are not, it just leaves it empty.

<?php do_action('comment_form', $post->ID); ?>

The do_action(’comment_form’, $post->ID) function is a hook for plugins, similar to wp_head() in the header. So don’t go deleting this or comment plugins won’t work.

Single.php

Single.php - Designredux - Free WordPress Theme

The single.php is used to display single posts. In this theme it is identical to index.php, except for a couple of things. For one, the number of comments are no longer displayed in the top right. And secondly, the comments.php is called on this page.

1. Comments.php

<?php comments_template(); ?>

<?php comments_template(); ?> calls the comments.php file and spits it out. That’s it.

Functions.php

Functions.php - Designredux - Free WordPress Theme

The functions.php file is used to hold all the custom functions outside of what WordPress offers that you plan to use in your theme. In this theme, it just contains the WP-PageNavi plugin, which is used in the theme for easier pagination.

Style.css

Style.css - Designredux - Free WordPress Theme

The style.css file is what WordPress expects to be your main stylesheet for your theme. It also contains nifty information about the theme that WordPress uses to display. Breaking down the style.css file is out of the scope of this series.

1. General information about the theme

/*

Theme Name: designredux

Theme URI: http://www.blogdesignblog.com/themes/

Description: A simple sweet blue/silver theme designed by blogdesignblog.com

Tags: Blue, fixed width, widgets, two columns, silver

Author: Vinh Le

Author URI: http://www.blogdesignblog.com

Version: 0.1

.

This theme is distributed under the Creative Commons Attribution-Noncommercial 3.0 Unported License.

Basically you can do whatever you want with it as long as you credit me with a link and

use it for non-commercial purposes. A link/credit is already integrated on the bottom of the

footer, you can remove it, but only if you put it somewhere else on the page.

.

*/

This is pretty self-explanatory. It is just basic information about the theme.

2. Color Scheme

/* `Color Scheme

----------------------------------------------------------------------------------------------------*//*

 Blue : #6f9fbd

 Text: #42423d

 Black: #464646

 Deep Black: #272727

 Silver: #eeeeee

 Pink: #ec81c0

*/

This is usually not required, but I thought it would make life easier for people who want to customize the theme.

Conclusion

This concludes the second part of this article. Now that we are done disassembling the WordPress theme, we can actually start the really fun part, which is modifying the theme to do what we want. This includes creating custom pages, scripts, and plugins. If there is something specific that you would like to see added to the theme, just leave a comment and I will cover it in a future article.

Subscribe today by RSS for free and get more great blog design tips and lists. If you don’t know about rss feeds or you want to use the email subscription option, read this page on subscribing to Blog Design Blog.

Further Reading

1. WordPress Codex for Theme Development.

References

1. Top picture is by wasabicube



Hire me!


Hi, my name is Vinh Le. Thanks for reading my article. If you are interested in the blog design services that I offer, please check out my services page.

Related posts:

  1. How to Disassemble a Free WordPress Theme Part 1 Most articles on Wordpress themes focus on building a...
  2. Designredux Free WordPress Theme Updated to Version 0.2 3 weeks after the release of version 0.1, I...
  3. Designredux 0.1 Free Wordpress Theme Released Name: Designredux (Don't you just love my theme names)...

How to Disassemble a Free WordPress Theme Part 1

Sep 30
2008

Outgoing Waves by MumbleyJoe

Most articles on Wordpress themes focus on building a WordPress theme from the view point of a developer. This series of articles will instead be focused on breaking down an existing free WordPress theme and will pay particular attention to the design of the theme throughout the series. After breaking down everything, this series will focus on adding more features and improving the design of the WordPress theme. For example, topics that will be covered are creating and integrating a variety of plugins, scripts, and redesigning parts of the theme to make it even better.

The free WordPress theme that we will be disassembling is Designredux WordPress theme

I will be going over the header.php, sidebar.php, footer.php, and index.php files in this part and will cover the rest in the second part of this article.

Header.php

Header - Designredux Free WordPress Theme

The header contains exactly what you think, everything on top. Basically this includes general information about the document type, the title, links to external scripts, and the navigations located in the top part of the WordPress Theme.

1. General information about the page

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<meta http-equiv="Content-Type" content="; charset=<?php bloginfo('charset'); ?>" />

This tells the browser what type of page it is and how to render it. It is very unlikely that you will ever have to change it.

2. Title

<title>

 <?php wp_title();

 if (function_exists('is_tag') and is_tag()) { ?>Tag Archive for <?php echo $tag; }

 if (is_archive()) { ?> archive<?php }

 elseif (is_search()) { ?> Search for <?php echo $s; }

 if ( !(is_404()) and (is_search()) or (is_single()) or (is_page()) or (function_exists('is_tag') and is_tag()) or (is_archive()) ) { ?> at <?php } ?>

 <?php bloginfo('name'); ?> - <?php bloginfo('description'); ?>

</title>

The title part is slightly a little more complicated here than usual. What it does is it checks to see what the current page it has been loaded on is. Based on what the page it is, it will display different titles. But it will always include the blog’s name and description that is set in the settings of WordPress.

3. External scripts

<link rel="stylesheet" href="<?php bloginfo('template_url');?>/css/reset.css" type="text/css" />
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />

The first external script called is the reset.css, which does exactly what it says and resets all the elements of the html to a base level in order to take care of the inconsistencies between how browsers render CSS/XHTML. For more information on reset.css, check out Meyerweb.

The second external script called is style.css, which is what your main css stylesheet needs to be named or else WordPress will get pissed. The url of which has its own special php call as you can see.

The following code is used to get the url of where your theme is located so you can link to the scripts, css, and other files you have in your theme.

<?php bloginfo('template_url');?>

For more cool stuff you can grab from the bloginfo() function, check out the Wordpress codex on bloginfo.

4. Internet explorer love

<!--[if lte IE 6]>

 <link rel="stylesheet" href="<?php bloginfo('template_url');?>/css/iefix.css" type="text/css" />

 <script type="text/javascript" src="<?php bloginfo('template_url');?>/js/unitpngfix.js"></script>

<![endif]--><!--[if lte IE 7]>

 <STYLE TYPE="text/css">

* html #subscribe ul#subscribe_buttons, #subscribe_buttons li {height: 1%; margin-bottom: -30px; padding-bottom: -30px;}

</STYLE>

<![endif]-->

This part of the header is where we show some love for internet explorer by paying closer attention to all of its beautiful little quirks. If the page detects that the browser is internet explorer 6 or less, then it will call a iefix.css to fix some css issues and unitpngfix.js to fix the issue with transparent png.

The logo uses a transparent png so that it displays nicely over the gradient background in the header. Without the fix, it looks terrible. The fix is provided by the awesome guys at Unit Interactive Labs.

The second if clause just adds a small css tweak for internet explorer 7 so that it looks just as pretty as it would in other browsers. For more information on css fixes for browser inconsistencies, check out Position is Everything.

5. Wordpress plugin

<?php wp_head(); ?>

This allows plugins that need to output data into the <head> tags to be able to do so. So don’t delete it.

6. Category Navigation

<ul id="cat_nav">

 <?php wp_list_categories('hide_empty=0&title_li=&depth=1'); ?>

</ul>

The wp_list_categories() function with the parameters of ‘hide_empty=0&title_li=&depth=1′ provides a list of all the categories (first-level only), shows even empty categories, and doesn’t output a title. To see what else you can do with wp_list_categories(), check out the Wordpress Codex on wp_list_categories.

7. Logo

<h1 id="logo"><a href="<?php echo get_settings('home'); ?>"><?php bloginfo('name'); ?></a></h1>

The get_settings(’home’) function provides the link to the index of the blog and bloginfo(’name’) grabs the name of the blog. While the text gets indented off to the side anyways, it is important to have it there for SEO.

8. Page Navigation

<ul id="page_nav">

 <li class="<?php if ( is_home()

 	or is_archive() or is_single() or is_paged() or is_search()

 	or (function_exists('is_tag') and is_tag()) ) { ?>current_page_item<?php }

 	else { ?>page_item<?php }?>">

 <a href="<?php echo get_settings('home'); ?>"><?php _e('Home'); ?></a>

        </li>

 <?php wp_list_pages('sort_column=id&depth=1&title_li=');?>

</ul>

The if clause inside of <li> tags changes the class depending on what type of page you are currently on. The current page gets assigned a class of “current_page_item” for styling purposes. The wp_list_pages() function follows the same convention and will also assign the class name of “current_page_item” if it is the current page.

The wp_list_pages() function with the parameter of ’sort_column=id&depth=1&title_li=’ displays in a list all pages (first-level only), sorted by id, and doesn’t output a title.

Sidebar.php

Sidebar - Designredux Free WordPress Theme

The sidebar contains several other methods of navigating the blog. It contains the search form, list of popular articles, and buttons for subscribing to your feed either by RSS or Email.

1. Subscribe buttons

<ul id="subscribe">

 <li class="sidebar_header">Subscribe to the feed</li>

 <li class="sidebar_subscribe">

 	<ul id="subscribe_buttons">

 		<li>

 			<a href="<?php bloginfo('rss2_url'); ?>" title="Subscribe to Feed by RSS"><span class="rss_icon">Subscribe by <span>RSS</span></span></a>

 		</li>

 	<!-- Subscribe by email, to activate include the link and delete these comments

 		<li>

 			<a href="" title="Subscribe to Feed by RSS"><span class="rss_icon">Subscribe by <span>EMAIL</span></span></a>

 		</li>

 	-->

 	</ul>

 	<div class="clear"></div>

 </li>

</ul>

The bloginfo(’rss2_url’) function provides the link to the rss2 feed.

The second part is commented out with <!– commented out stuff –> because you will need a plugin to be able to allow readers to subscribe by email or a link to a feedburner’s email page. There is no point in showing it unless you want to use it. Just delete the comments and put the link in to activate it.

2. Popular posts

<ul id="popular">

 <li class="sidebar_header">Popular posts</li>

 <?php

 		query_posts('category_name=Popular&showposts=5');

 	while (have_posts()) :

   		the_post();

 ?>	<li><a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a></li>

<?php

 	endwhile;

 ?>

</ul>

The function query_posts() with the parameter of ‘category_name=Popular&showposts=5′ shows the latest 5 posts from the category ‘Popular’. The while() function loops through the results until there are no more posts and displays the link and title of each post.

For more detailed information on query_posts() function and other cool things you can do with it, check out Vandelay’s article on Category Hacks for Wordpress Theme Designers and the trusty Wordpress Codex.

3. Search form

<ul id="search">

 <li class="sidebar_header">Search</li>

 <li>

 	<form id="search_form" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="get">

 	<input type="text" name="s" id="search" class="text" value="<?php echo wp_specialchars($s, 1); ?>" size="22" tabindex="2" />

 	<input name="submit" type="submit" id="submit" class="button" tabindex="5" value="Search" />

 	</form>

 </li>

</ul>

This is the basic search form. When someone submits a search, WordPress detects that action and displays the results according to search.php. If no search.php exists it will use index.php to display it. The wp_specialchars() function just strips out all the special characters before submitting the search query.

Footer

Footer - Designredux Free WordPress Theme

The footer in this theme displays the latest 5 posts and a little about section as well as some additional copy at the end.

1. Recent Posts

<ul id="footer_recent">

 <li class="footer_header">Recent posts</li>

 <?php $myposts = get_posts('numberposts=5'); foreach($myposts as $post) : setup_postdata($post); ?>

 	<li>

 		<a href="<?php the_permalink(); ?>">

 			<span class="footer_date"><?php the_time('F j, Y'); ?></span>				<div class="footer_headline">

 				<h6><?php the_title(); ?></h6>

 				<span class="footer_comments_number"><?php comments_number('0', '1', '%'); ?></span>

 				<div class="clear"></div>

 			</div>

 		</a>

 	</li>

 <?php endforeach; ?>

</ul>

The get_posts() function with the parameter of ‘numberposts=5′ returns the latest 5 posts. It then loops through a foreach loop and for each post it calls another function setup_postdata(), which gives us access to more than the title and link of the post. In this case, we need the comments number as well.

The comments_number() function displays the number of comments for that particular post. The first parameter decides what to display when there are no comments. The second parameter decides what to display when there is only one comment. The third parameter decides what to display when there are more than one comment.

The other functions are basic template tags used to grab the date and title of the post, which you can find more about at Wordpress Codex on template tags. For more information on get_posts() function, check out the Wordpress Codex on get_posts().

2. About section

<ul id="footer_about">

 <li class="footer_header">About</li>

 <li class="footer_about_text">

 	<!-- Open about_text.txt in the theme folder to edit this text -->

 	<?php include (TEMPLATEPATH . '/about_text.txt'); ?>

 </li>

</ul>

The include() function grabs the file passed to the function and displays everything that is in there. The TEMPLATEPATH is just the path to where your theme is located. In order to change what is displayed, just open about_text.txt and edit it as you please.

3. Copy information

<ul id="footer_copy">

 <li class="left">

 	© <?php echo date('Y')?> <a href="<?php bloginfo('home'); ?>" title="<?php bloginfo('name'); ?>"><?php bloginfo('name'); ?></a>

 </li>

 <li class="right">

 	<a href="http://www.blogdesignblog.com" title="WordPress theme: designredux"><?php _e('Designredux theme developed by blogdesignblog.com'); ?></a>

 </li>

</ul>

The date() function with the parameter of ‘Y’ just grabs the current year formatted as XXXX. The function _e() is for translating the text into different localization, if one doesn’t exist, it just displays what is inside the single quotes.

For more information about what you can grab from date() check out the php.net documentation on date(). If you are interested in the _e() function and other translation tools check out the Wordpress Codex on translating.

Index.php

Index - Designredux Free WordPress Theme

Index.php is the basic way of displaying a page, it is used when there are no other better page templates to use. It also serves as the home page.

1. Header

<?php get_header(); ?>

Grabs the header.php file and spits it out there.

2. The Wordpress Loop

<?php if (have_posts()) : ?><?php while (have_posts()) : the_post();?>

Well that is just the beginning of the loop. The if clause checks if there are any posts, if there are then it will loop through them and display them according to how it is arranged inside the loop.

If there are no posts then it will just go to the following code:

<?php else : ?>    <h2>Not Found</h2>

    <p>Sorry, but you are looking for something that isn't here.</p>

<?php endif;?>

At this point, it just displays what is after the <?php else: ?> and before the <?php endif;?> when there are no posts. You can put anything you want in there to let the reader know there are no posts.

3. Inside the Wordpress Loop

<div class="post">	<div class="post_header">

 	<span class="post_date"><?php the_time('F j, Y'); ?></span>

<div class="post_headline">

 		<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>

 		<span class="post_comments_number"><?php comments_popup_link('0', '1', '%'); ?></span>

 		<div class="clear"></div>

 	</div>

<div class="post_byline">

 		Posted by <span class="post_author"><?php the_author_link()?></span> in <?php the_category(', '); ?>

 	</div>

 </div>

<?php the_content('<span class="post_read_more">Read more</span>'); ?>

<div class="clear"></div>

</div>

The the_time() function with the parameter of ‘F j, Y’ grabs the date of the post and formats it to display the full textual representation of the month, followed by the day of the month without leading zeros, then a comma, and finally the year in the format of XXXX. For more cool ways you can display the date, check out php.net’s extensive documentation on it.

The the_author_link() grabs the name of the author and wraps it with a link to the author’s website. There are many other ways you can display the author’s name and change where it links to at Wordpress codex on template tags.

The the_category() function with the parameter of ‘, ‘ displays a link to each category separated by a comma and space that the post is assigned to in WordPress. More on the_category() function at Wordpress codex on the_category.

Finally, the the_content() function displays the actual post. When you use the <!–more–> tag, the post will be cut off and display what is inside the single quotes at the end of the post wrapped in a link to the full article.

4. Page Navigation

<?php if(function_exists('wp_pagenavi')) { wp_pagenavi(); }; ?>

This checks if there is a function called wp_pagenavi and then calls it if there is. WP-PageNavi is a plugin that makes pages much easier to organize. I modified this plugin a bit and inserted it into functions.php so that it doesn’t require any installation.

5. Sidebar and Footer

	<?php get_sidebar(); ?>

<?php get_footer(); ?>

These last two functions do exactly what they sound like they do, they grab the sidebar.php and footer.php and spits them out right there.

Conclusion

This concludes the first part of this article. The next part of this article will cover the single.php, comments.php, and the rest of the theme. Check out the links below to help familiarize yourself more with WordPress functions/template tags.

Subscribe today by RSS for free and get more great blog design tips and lists. If you don’t know about rss feeds or you want to use the email subscription option, read this page on subscribing to Blog Design Blog.

Further Reading

1. Wpcandy has a pretty cool basic cheat sheet for wordpress with common code snippets and what they do.

2. Wpcandy went ahead and outdid themselves later and made an advanced cheat sheet for wordpress.

References

1. Picture is by MumbleyJoe



Hire me!


Hi, my name is Vinh Le. Thanks for reading my article. If you are interested in the blog design services that I offer, please check out my services page.

Related posts:

  1. How to Disassemble a Free WordPress Theme Part 2 In this article, I am going to go over...
  2. Designredux Free WordPress Theme Updated to Version 0.2 3 weeks after the release of version 0.1, I...
  3. Designredux 0.1 Free Wordpress Theme Released Name: Designredux (Don't you just love my theme names)...

Designredux 0.1 Free WordPress Theme Released

Sep 26
2008

Designredux - Free Wordpress Theme

Name: Designredux (Don’t you just love my theme names)

Version: 0.1

Platform: Wordpress (Possibly other platforms if there are enough requests)

Live Demo: Designredux live demo

Download: Designredux 0.1 zip

A few notes

Yes, this version is really 0.1 because this theme was designed with the intention of being in continual development as a project for this blog. Basically what that means is that this theme is intended to be used as a part of a series of tutorials on coding, designing, and redesigning. By the time it hits 1.0, it will be loaded with new features and of course a redesign as it is reassesed as time goes on.

The next series of articles will focus on how this theme was built from scratch. Then after that, future articles will focus on adding more features and improving the design of the theme. If you have anything you would like me to cover in particular, feel free to drop me a message or comment.

Subscribe today by RSS for free and get more tips on improving your blog design. If you don’t know about rss feeds or you want to use the email subscription option, read this page on subscribing to Blog Design Blog.



Hire me!


Hi, my name is Vinh Le. Thanks for reading my article. If you are interested in the blog design services that I offer, please check out my services page.

Related posts:

  1. Designredux Free WordPress Theme Updated to Version 0.2 3 weeks after the release of version 0.1, I...
  2. How to Disassemble a Free WordPress Theme Part 2 In this article, I am going to go over...
  3. How to Disassemble a Free WordPress Theme Part 1 Most articles on Wordpress themes focus on building a...