David of My Blog It recently started a WordPress designer interview series and he asked me to answer some questions for that series. The article is now up on his blog. Read it to find out what food you should use to bribe me for a favor. Head over to MyBlogIt.net to read the interview.
I released Wpdesigner5 under Creative Commons (CC) because it uses quite a few icons from the FamFamFam Silk Icons set, which was released under (CC). And unlike the two previous themes, this one doesn’t support the old WordPress 2.0.x series.
Along with the theme, there’s a psd file up for download to customize the About box in the main column, just in case you want to replace my orange eatin’ monkey face.
Now we are going to get into the really exciting things that can be done with custom fields! If you haven’t already taken a look at Part One, give it a quick read to bring yourself up to date with the rest of us. In this post (and the posts to come!) we are going to look at some more advanced techniques involving the use of custom fields.
The end of the last post directed readers to take a look at the advanced section of the guide on custom fields in the WordPress codex. Give it a quick read if you haven’t. The advanced section introduced us to this function:
.
In this lesson we are going to focus on number two from the list above. Using the following simple function to call up a specific key value:
Lets run through how we can use this function to create flexible custom layouts on a per post basis.
Simple and elegant I think. The possibilities are endless. The only negative is that this is something you need to do at the start of a new blog or risk the need to create custom fields for every post you have published. There is a way around this issue that I will cover in a future post. Next in the custom fields tutorial series we will look at using custom fields to create a custom image per post. (ie. a category icon)
Follow this Custom Fields tutorial series from the beginning.
Double right sidebars blog designs are popular nowadays. However, free double right sidebars WordPress themes are far and few. Therefore, I took some time to put together a list of free WordPress themes with double right sidebars.
I like ColdBlue…a lot. It’s a solid, very clean, and flexible theme. What more can you ask for in a WordPress theme? However, it’s still rough around the edges. After several fixes, there’s quite a lot to be done or can be done with ColdBlue. Given that this is Matt’s first public release, ColdBlue is an awesome looking theme.
I wish my first public theme release was like this 
.
Custom fields offer a lot of flexibility for WordPress users. And the flexibility goes well beyound posting the status of your current mood or the latest book you are reading. Over a course of a number of posts, we are going to take a look at what can be done with custom fields. (which is a lot!) My hope is to offer a good resource of learning material for those wishing to utilize custom fields to their full extent. Now instead of jumping immediately into things, lets start things slow and work our way up.
The best place to start when first attempting anything new and unfamiliar in WordPress is to consult the documentation. With that in mind its unfortunate that the available documentation and examples regarding custom fields is lacking. Not to mention scattered. Few seem to have a good understanding of custom fields. Which is why we will attempt to fill in the gaps and unify a few of the basic things to start. Lets go over the document page I referenced.
The docs label the information presented by custom fields as meta-data, (Wikipedia has an interesting article on understanding the term metadata) the important thing to note about this meta-data is the key and value relationship of the data. The easiest way to think of the terms is that a key is the label, or name of the information, while a value is actual information related to the key. It is worth noting that any keys you create are accessible later via a drop down menu available when writing a post, the value however is entered per post. Lets look at the interface where custom field information is entered:
The red box is the drop down menu we talked about a moment ago. The green box is where new keys are entered. The blue box is where a value is entered. And all of this is can be found beneath your main post writing area under the bar labeled custom fields. Easy enough. Lets go through a quick example. Start a new post, enter in any key and value you wish and publish the post. Make sure to keep in mind the difference between a key and a value.
If your current theme doesn’t have meta-data preconfigured, nothing will display. If that is the case, how do we get the information to display? We use the
tag as illustrated in the documentation on using custom fields. Just place
somewhere within The Loop and WordPress will display the information you entered into the key and value areas of your post at that location.
And as shown in the docs WordPress will then output source similar to the following:
And of course styling is as simple as editing the styling attributes for the UL and SPAN classes:
That about covers the basics. We’ll look at some advanced custom field concepts the next lesson. Including finally how to style per post. If you’d like to do some homework, read the advanced techniques for custom fields from the codex.
Complete Lessons Listing:
Part Two Styling Per Post
Adding comment avatars to your blog is a great way to quickly recognize comment authors and distinguish same name commenters. It also bring a community vibe to your blog. Here’s an example:
Although there’s no one central avatar system, fortunately, there’s practically a plugin for every avatar system. Pick the system you prefer, download the matching plugin, and then install and integrate the plugin to start displaying avatars with comments.
Currently, Wpdesigner is using the MyAvatars plugin to integrate avatars from MyBlogLog. For the long time Gravatar users, there are several available plugins. For examples: WP Gravatar and Gravatar 2.
Of course, no one external avatar system will catch all commenters. No worries, there’s a localized avatar plugin that allows your users to upload their own avatar. You then decide which factor to recognize the commenters by (name, email, etc.), in order to assign the uploaded avatars.
In my previous post, the question came about if posts can be styled for a specific category. Well you’ll be happy to know that they can be by using the
tag. This handy tag can be used in a function, within The Loop, that allows you to do a few useful tricks. Before we get started lets take a quick trip to read what this tag is in the WordPress documentation here.
How are we going to use this tag? Well using the function below the tag will be used to pull out the category name of the post loop its contained in.
Having extracted the category name we can use it within a DIV as part of a name for an ID or CLASS. Lets be more specific and go through an example. Once again we will use the Kubrick WordPress template. (though most templates should work just fine.) Go to Presentation: Theme Editor: Select Kubrick in the drop down menu: Main Index Template. If you scroll down while browsing the index you should see the following: (more…)
Have you ever seen a website that has certain content on the sidebar of the home page, but a different sidebar is displayed when you’re looking at a single page? How about nice little welcome messages that go away as you venture into the site? It’s a pretty nice effect, and it’s quite simple to pull off. It does, however, require you to know a little about PHP, but fear not; if you only know HTML, even just a little, you might be able to get by with this trick.
On the Home page, you see featured themes:
…on single posts, you don’t:
The function that allows one to make such magical pages as those described above is called a conditional tag. This tag, as the name implies, tells the page to do things under certain conditions. There are many conditional tags, but the most popular (in my experience) is is_page.
(The full list of conditional tags is on WordPress.org.)
The beauty behind the
function is that it can be executed many ways. Let’s say you want to welcome your visitors to your site on the home page, but you want that message to go away once they delve beyond that front page. It’s actually quite simple. Use the following code (and type it out; don’t be a copy-and-paster): (more…)
In my last tutorial, I explained some of the reasons behind the use of various line lengths, known as a column’s measure. I mentioned that a column’s line-spacing, or leading, plays a significant part in the choice of a line’s length. Line-spacing plays an important part in a lot of things typographically, as I’ll explain.
The first thing we have to recognize about line-spacing is that there is no one perfect setting. Each circumstance calls for a different use, so the trick is to find the basic principles involved.
So what is line-spacing to begin with?
Line-spacing, also known as leading, is the white space between each line of type in a paragraph. Adding or subtracting from this white space greatly effects the readability of the text, and being able to set it properly is essential to the readability of the design.
In CSS terms, line-spacing is known as the the
property. (more…)
Designed by Hans N.Coomar from BlogoSquare based on the original code of the Sandbox by Andy and Scott from plaintxt.org.
A lightning fast, white minimalist, 3-column theme, SEO optimised and coming pumped full of features like quick shooting stats at the footer listing number of posts, comments and categories; welcome back feature to greet returning visitors with a message to entice them to subscribe(found at sidebar) or displaying comment’s author’s name when the latter comes back for another comment.
Plus, all the great features of the Sandbox like ability to style every single component of your blog so instead of relying on a plugins to style asides, you can style the asides category itself.
I also provide free help, advice, and support for any issues you may be having with the theme so please do let me know if something is bugging you.
First, design the tabs; I used Photoshop 7.0. Before any slicing, saving, or coding, here’s my tab design:
In the example above, no matter what the lengths of the links are, they all sit within tabs that have the same width. That’s because I plan on coding stretchable tabs. Once my tabs are coded, they’ll adjust themselves to the right widths.
What can you expect from looking at the design alone?
As a coder, I see:
What I’m saying to myself:
Thank you for visiting Wpdesigner.com. To get in touch with me, go to feedback for contact information.
Copyright © 2008 Tung Do. Club Terms and Conditions.