Skip links

Performancing

Main navigation

nathanrice

PR6 WordPress Theme release site for sale

by

Ryan’s Note: Just a reminder that we have some top notch blogs pass through our blogs for sale section. Keep your eyes peeled.

I am looking to sell a WordPress theme release site. Back in March, Cory Miller and I started RockinThemes.com as a hub to release free WordPress themes that he and I had developed.

Here are the details of the blog…

– PageRank of 6
– Technorati rank of 111 (this blog could easily crack the top 100 with new theme releases)
– 134 subscribers from feedburner (currently)
– Thousands of backlinks
– 10,000+ unique monthly visitors
– 50,000+ monthly pageviews

Google Rankings
#4 for “free wordpress themes”
#2 for “custom wordpress theme”
#5 for “custom wordpress themes”
#1 for “suckerfish wordpress theme”
#2 for “web 2.0 wordpress theme”

The main source of revenue for this site is the custom WordPress theme requests that come in. This site has consistently earned me $5000 per month in custom requests. However, the site has never been properly monetized. It could also earn hundreds passively if it were monetized well based on the number of unique visitors coming from google.

This is one of the most well known WordPress theme release sites in the community. You’re getting both traffic, and reputation with this purchase.

This purchase would include the domain, the blog database export, and the design. The themes are not included in this sale, however an agreement may be negotiated for the inclusion of individual themes after the sale. If you purchase the themes, we are willing to update all the themes and fix any bugs. We will also stay on for 1 month to handle comment support for the themes (no custom work). We would also be willing to develop themes for release on RockinThemes to generate new traffic (new themes help boost the custom requests). If the new owner wanted to have us release new themes, we would negotiate a price per theme after the sale.

Bidding starts at $5,000. Public bids are preferable. Private bids will be made public (number only) for the sake of the auction process. There is a private reserve price that must be met in order for the sale to take place.

10 Things You Must Know About WordPress Themes

by

Looking back at the code of my first attempt at a WordPress theme, I can easily see that without a proper understanding of WordPress theme template files and template tags, it can be a frustrating project to undertake. And although I am a HUGE fan of learning as you go, I wanted to share a few secrets that might save you a headache or two along the way.

1. The Loop
If you’re not familiar with “the loop”, you have no business trying to work with WordPress themes yet. The structure of the loop is simple, yet it’s vital to the development process. It goes a little something like this:



It is in essence a call to custom WordPress functions that query the database to see if you have posts. If you do (and while you do … it’s a PHP thing … a loop), then you can insert custom template tags inside the loop to display the content of the post. I won’t go into detail, but suffice it to say that this is something you need to understand. For more on the loop, go to the WordPress codex.

2. Pages
WordPress did us all a huge favor when they implemented the ability to have static pages (as opposed to blog posts) for static content. For instance, an “About Me” page or a “Contact” page. Pages can be a powerful tool at your disposal. You need to know how to display pages, how to call pages, how to style pages, etc. Pages can also be a powerful tool in using WordPress as a website content management system.

3. Sub-Pages
Also very important. WordPress allows you to set up pages in a hierarchical structure. It lets you choose (if you so desire) a page to be the “parent” or “child” of another page. This is important, especially if using WordPress as a content management system. It can also be helpful in simply organizing your pages, or displaying lists of pages. Which leads me to…

4. List Pages
If you’re going to be releasing free themes, or just developing one for yourself or a client, you are going to need to know how to list links to your “pages”. Whether it’s a simple list of all your pages, or a custom list of only specific pages, you need to know how to output a list in any way you can think of. Say for instance that you wanted to list all the “child” pages of a particular “parent” page somewhere. How would you do it? Or how do you remedy the “nested list” problem in a horizontal navigation bar? These are questions you should be able to answer immediately.

5. Template Tags
This is more generic, but you need to be very familiar with how to display content of any type in a WordPress theme. Learn to love this page. It’s gonna save your butt quite a few times. Most important (in my opinion) would be the section titled “Post Tags”. You’ll definitely want to spend some time in that section.

6. Query Posts
I’ve written some pretty neat tutorials on this loop qualifier over at the Blog Herald, and for good reason. This is a powerful tool, and if you want to be a serious WordPress developer, you need to know it well. It can be too powerful sometimes, so be careful. Definitely know what you’re doing before you start using this to call specific data. It will affect the other loops that follow it (if using multiple loops). Nevertheless, if you use WordPress as a CMS, you can beat query_posts.

7. CSS
CSS and web design are becoming synonymous nowadays. And a WordPress theme is no exception. Know what HTML you are outputting by observing the div structure in your template files. Then, style accordingly in the style.css file. Hacks, browser limitations, workarounds, etc. must all be in your arsenal. Making a good WordPress theme is 75% CSS because people like pretty stuff. They could care less how you manipulated the loop, they just want to make sure it looks good.

8. PHP
Duh, right? WordPress is built on PHP. But it’s more than that. Eventually you will run into a problem that you can’t solve using the built in functions of WordPress or a plugin. When this happens, knowing PHP can do you a world of good. I’ve written custom scripts for clients that do things from call random images, to displaying custom content. And it would be beneficial to at least know a little PHP if you want to develop WordPress themes.

9. Comments are not secondary
If you expect people to use your themes, you must also expect them to want a successful blog. Like it or not, people use their comments to measure success, and if a blogger wants commenters to comment, the comments have to look nice. That’s where you come in. It really doesn’t matter WHAT the look like, as long as they flow with the look of the theme, and each comment is separate from the last and next. You’ll have to use your creative skill here, and understand how a good comments.php file looks. Like I said, this is not a secondary issue.

10. Widgetization
It’s no longer optional. Anything you can widgetize, you must. Users expect it, and for good reason. What better way to display data than by drag and drop? I’m a WordPress designer and even I have used widgets in the past. It just doesn’t make sense not to your sidebars and bottom bars. It’s also a good idea make sure you have sufficient style in your CSS to cover the widget content.

11. BONUS TIP – Conditional Tags
One thing I’ve noticed is that instead using multiple template tags for different content, you can use a conditional tag to check what type of page is being displayed. For instance, instead of a search.php file, you can just use the is_search() conditional tag to output search page listings. Also, the is_home() function can be used a for all kinds of things. It only outputs data if you’re on the homepage. And the possibilities are endless with conditional tags. I literally use them ALL the time. Probably one of the best ideas the WordPress guys ever had. Still waiting on that is_subpage() function though 🙂

Keep in mind that this is MY list. If you have something to add, please do so in the comments below. I’m always looking for new tips and cool tricks to add to my stockpile 🙂

Previous Posts, or Next Page?

by

Unfortunately, sometimes the logical thing to do and the “technically right” thing to do are polar opposites. Such is the case with those little tiny links at the bottom of your WordPress blog that send your reader into the pits of your archives. One must make a choice here… should I link to “page 2” of the blog archives using the words “previous posts” or “next page”?

Technically speaking, they are indeed previous posts. One would think that while a person is browsing the articles on your blog, they would naturally know what “previous posts/entries” meant, and would consequently know intuitively which link to click when presented with the options.

One would be wrong.

In fact, yours truly has been so indoctrinated by habit (and perhaps through digg’s “next” link) that I found myself more times than not, actually not reading the text of the link, and simply clicking based on the position of the link, and the direction of the arrows.

This was not acceptable. All my free themes, as well as the customs I had done, all had “previous entries” and “next entries”.

No, I haven’t gone back and changed them all yet … but I have implemented a new policy … and wrote some simple code to get them displaying correctly. Wanna see? OK…

The first challenge is getting the WordPress code working right.

The code for the “next page” link looks like this:



It seems as if WordPress wants us to use the “next page” phrase 🙂

But there’s also the “previous page” link to take care of. No problem…



Notice that we are using the « and » symbols to indicate next and previous. Again, this is just because it makes sense and it reinforces the idea of true forward and backward navigation. So currently, there are actually 2 links siting side by side, probably aligned left, with little or no spacing between them. With a little CSS magic, we can take care of that. Here’s the code in full … then I’ll give a brief explanation:

I embedded the CSS to save room, but feel free to name your divs and do this in the stylesheet. Basically, what I’ve done is calculated the width of the parent div (in my case, it was 450px) and divided the width by my 2 navigation divs. That way, we get one link on the far right of the parent, and one link on the far left (further reinforcing the idea of going to the next page or previous page). All this code does is floats the “previous page” link to the left, and aligns the text left, and floats the “next page” link to the right, and aligns the text right.

Presto! Now you have logical navigation links at the bottom of your archive pages. Feel free to insert this code in any WordPress template page that needs navigation.

Hope that helps! I know it saved me some frustration 🙂

What Makes You Want To Subscribe

by

I generally subscribe to 3-5 new blogs per month. Maybe they’re not new, but they’re new to me, because I’ve never heard of them or read them before. But trying to quantify the features of the blogs I subscribe to is hard to do. Why do I subscribe? Is it the content? The design?

Because I’m a curious guy, I decided to take some inventory of the blogs in my reader. It was actually a pretty fun experiment. I was surprised to actually see the design of some of the blogs. Since I read exclusively from my reader, I didn’t even remember what the design looked like 🙂

Here are 5 features I’ve found to be effective to convincing me to subscribe.

1. Would it be cliche to say that content matters?

I don’t really care if it’s cliche or not, content matters! If you don’t have regular decent articles, or at the very least articles that encourage lively discussion, then don’t even bother starting a blog. I’m dead serious. Blog content, to a person who reads 80+ feeds, is of paramount importance. Don’t even think about softball articles.

2. A clean, simple, aesthetically pleasing design

If you can’t design a site for your blog software, pay someone to do it. We are professionals. This is what we do. You can’t ignore the fact that if your design sucks, you won’t get as many readers. I’m partial to sites with the content on the left and two well used right hand sidebars, but that’s just me.

3. Readable Text

If your readers are like me, then they will bookmark your site before subscribing to it. Normally, I will bookmark the blog in del.icio.us and come back once or twice a week and check the content. I use this time to see if the site is worth a spot in my reader. So…. that means for at least a week, I will be reading your content directly on your site … which means you need readable text. For me, that means either Arial or Trebuchet MS fonts. If you use Lucida Grande, I’m gonna be pissed. I just thing that font is unreadable. If you use a Georgia or Times New Roman font, you might be pushing the line. It better be a big font with lots of space. Serif fonts, without good spacing, can be unreadable as well.

4. Prominent Link to Your RSS Feed

I like to reward good bloggers by subscribing directly to their feedburner feed … if they have one. The joy of seeing new readers in your stats is a good encouragement … something you don’t get if I subscribe to your blog’s feed address. So, don’t make me hunt for your link. If it takes me too long to find the link, I’ll just click the RSS button in the address bar of FireFox. Normally, that will give me your blog’s feed, not your feedburner feed. Worse still, if I’m in a bad mood and I can’t find your link, I might not even subscribe at all, out of spite for the time you made me waste. Think about it.

5. Comment on My Blog

OK, OK, this has nothing to do with your design, but it will get me to read your blog. My personal blog is religious in nature. I like to find good bloggers in my niche. The way I do that is by checking who my favorite bloggers link to, and by checking the sites of the people who comment on my blog (also, linking to me gets you lots of love). If you can contribute to the conversation in my comments, I will probably assume that you can contribute to the conversation on your own blog. Nearly every single one of my regular commenters holds a place in my feed reader. That’s not a coincidence.

What about you? What makes you subscribe to a blog’s feed? Be honest and asses the blogs that hold a place in your reader and ask yourself why you subscribed. Was it the cool design? The great content? The ease of process? Did they comment on your blog? What was it? Let everyone know in the comments!

WordPress: Active Page Tabs

by

If you browse the WordPress Theme Viewer, take notice of where most designers place their page links. Most designers put them in a horizontal menu either directly above or below their header image. What you might also notice is that many designers treat the links like tabs with a link hover effect. Sometimes, that link style (something that sets the tab apart on hover) will be shared with an active page style. In other words, a tab will look different than the other tabs when it is either being hovered over by the mouse, or if the tab represents a page that is currently active.

Thankfully, the good folks at WordPress decided to add a great little feature to the wp_list_pages function. When a page is active, the list item that represents that page gets a class added to it called “current_page_item”. This is in addition to the “page_item” class that is on all page list elements (elements can have multiple classes). So now that we know that this new class is automatically added to active list items, we can take advantage of that and style that element based on the class, to demonstrate that the page tab is active.

As always, I’m assuming you know basic web coding, and this isn’t a tutorial on how to make tabs in CSS. If you need help with that, check out Listamatic.

The WordPress Template Code

So, let’s assume you’ve got the menu marked up like so:

<div id="menu">
<ul>
<li><a href="<?php echo get_settings(‘home’); ?>">Home</a></li>
<?php wp_list_pages(‘title_li=&depth=1’); ?>
</ul>
</div>

Yes, I’ll explain this 🙂

The first <li> is a link back to the home page of our blog. It’s dynamically generated based on our WordPress Settings. Pretty cool. Next comes our page list function. As you can see, I’ve opted to not display a header (because this is a horizontal menu), and only display top-level pages (depth). You can take a look at all the different options here.

The HTML Output

Now, the html output of that code will look a little something like this:

<div id="menu">
<ul>
<li><a href="http://example.com/">Home</a></li>
<li class="page_item"><a href="http://example.com/page-1/" title="Page 1">Page 1</a></li>
<li class="page_item"><a href="http://example.com/page-2/" title="Page 2">Page 2</a></li>
</ul>
</div>

You may have noticed the class added to each of the list items that were given to us by the wp_list_pages function. Really, this doesn’t matter all that much, because we can control the look fairly easily without it.

But, when you are on one of those pages (when the page is active), the output looks like this:

<div id="menu">
<ul>
<li><a href="http://example.com/">Home</a></li>
<li class="page_item current_page_item"><a href="http://example.com/page-1/" title="Page 1">Page 1</a></li>
<li class="page_item"><a href="http://example.com/page-2/" title="Page 2">Page 2</a></li>
</ul>
</div>

Notice the addition of the “current_page_item” class that got added to the Page 1 list item. What this means is we can actually add a new class in our CSS file and style it:

#menu ul li.current_page_item {
style goes here
}

Add whatever style you’d like to that class, and make it stand out as an active tab.

Oops! A problem!

As some of you may have noticed, because we hard coded the <li> element of the link to the homepage, there’s no way for it to add the class dynamically based on whether or not the homepage is active. So, let’s put in a little PHP to fix it:

<div id="menu">
<ul>
<li class="<?php if (is_home()) { echo "current_page_item"; } ?>"><a href="<?php echo get_settings(‘home’); ?>">Home</a></li>
<?php wp_list_pages(‘title_li=&depth=1’); ?>
</ul>
</div>

We use the is_home() conditional tag to determine if we were on the homepage. If we are, then it echoes “current_page_item”. A simple workaround, but it works like a charm.

Definitely take a look at this and use it to learn a bit more about how to take the built in WordPress functionality and use it to your benefit by making really cool, feature-rich themes.

Have an idea for a future post? Want to know something about WordPress that you can’t quite figure out? Leave a comment below and let me know. Your question may be the subject of a future WordPress tutorial right here on Performancing!

Absolutely Positioning Your Blog Search Form

by

If you take a look at some blogs, you may notice that they have their search bar in some odd places. Some put it in the header, some put it in the horizontal navigation bar, some in the sidebar. I personally like to have it in either the header or in the navigation menu. It seems like that’s always the first place I look when I want to find the search bar.

But getting the search bar positioned correctly can be frustrating, especially if you are using the entire header area to fit your logo.

So today, we’re going to position the search bar absolutely, within the header. I normally don’t recommend absolute positioning, because much of the time it’s not necessary, and if you can avoid it, definitely try to keep your positioning normal. But in this case, I think an exception is in order … so let’s get started!

First, let’s look at the header. For this article, I’ll use the a theme I created a while back called RockinSuckerfish (the 2 column version). Let’s look at some of the header code:

<div id=”header”>
<div class=”rss”>
<ul>
<li><a href=”feed:<?php bloginfo(‘rss2_url’); ?>”>posts feed</a></li>
<li><a href=”feed:<?php bloginfo(‘comments_rss2_url’); ?>”>comments feed</a></li>
</ul>
</div>
<div class=”search”>
<form method=”get” id=”searchform” action=”<?php bloginfo(‘home’); ?>/”>
<input type=”text” size=”15″ value=”Search” name=”s” id=”s” />
</form>
</div>
</div>

For the time being, we’re going to ignore the “rss” div, although it is also positioned absolutely. As you can tell, the hierarchy of the markup goes like this: “header” > “search”

So let’s style the header, and position the search bar. The first thing to do is get our header styled correctly:

#header {
height: 123px;
padding: 0px;
margin: 15px 0px 0px 0px;
background: #9AB6CA url(images/header.jpg);
position: relative;
}

Your header may be different, but the one thing that you definitely need for this to work is the last style, position: relative; Without this, our absolutely positioned search form will position within the browser window instead of its parent element. By adding the position: relative; you allow a child element to be absolutely positioned within the parent.

Now, we need to position the search form. Here’s the code, then we’ll go through it:

#header .search {
position: absolute;
top: 50px;
right: 20px;
}

Now, obviously you can add whatever other styles you want, but you need to have at least this — position: absolute; — distance from either the top or bottom — distance from either the left or right. Notice I said “either/or” on those last two. Don’t do both … it probably won’t work 🙂

As you can see, I decided to position mine 50px from the top, and 20px from the right, within the header div. You can put yours anywhere you like… it’s really up to you.

Like I said, this is a neat trick when you have a pesky element that you want to position accurately and easily … but definitely don’t overuse it.

For more on absolute positioning, check out this article. It goes far deeper than this article, so if you’re interested in learning more, that’s a good place to go.

Enjoy!

Using Your Blogroll to Manage Text Ads

by

If you’re a web code expert (or even novice) you can probably handle hard coding in sponsored links in your blog’s sidebar. But many people are unaware that you can manage text ads via your WordPress administration panel. It’s a small tweak/hack, but once you have it in place, adding and removing sponsored text ads will be a breeze from then on.

The first thing you’ll want to do is log into your WordPress administration panel. Click on “Manage” in the top-level navigation, then click on “Categories” in the sub-navigation. This is where you need to add a new category. For the purposes of this article, we’ll call it “Ads”.

After you add the new category, take a look in the list and find the Category ID (that will be located in the far left column). Once you have the category ID, we can move on to…

…The blogroll. Click on the “Blogroll” link in the primary navigation bar of your WordPress admin panel. Click “Add Link” in the sub-navigation.

Now you should have a form to fill in. Essentially, you’ll want make the “Name” the actual text you want to appear in your sidebar (the anchor text). After that, fill in the URL you want to link to. Go ahead and leave the “description” field empty.

Just before you submit the form, take a look to your far right. There, you’ll see a list of categories (probably only “Blogroll” and “Ads”). Uncheck the “Blogroll” category and check the “Ads” category. NOW you can submit the form.

Here comes the tricky part (depending on whether or not you like to edit WordPress theme files). Open your sidebar.php (or whatever your sidebar file is called) and create a new space. For the purposes of this article, I’ll use a standard widgetized sidebar format for my new list. You’ll basically want to add this (or something similar):

<li>
<h2>Sponsored Links</h2>
<ul>
<?php get_links(8, ‘<li>’, ‘</li>’, ‘ – ‘); ?>
</ul>
</li>

I’m not going to go into the explanation of this Template Tag, so for more information on that, go here.

I will, however, explain the “8” inside the parenthesis. The “8” represents the category ID we want to be displayed. Remember back when I told you to locate the category ID of the new category you added? That’s what will go where the “8” is in my code, so replace the “8” with the category ID you have.

The output will be a list of links that you place in that category. This gives you a quick and easy way to manage sponsored links, or any kind of link really.

Be sure to check out all the other cool things you can do with the get_links template tag. Use you imagination and you can come up with anything!

Happy Coding!

Integrating Plugins With Your WordPress Themes Using functions.php

by

Have you ever been browsing through the theme viewer or checking out the daily theme release announcements over at WeblogToolsCollection.com, and noticed that a certain theme requires a plugin to function correctly (or at least has a feature that requires a plugin to work)? I certainly have, and although I have never required a plugin for any themes I’ve released, I can see why one would want to include the functionality of a plugin to make that theme even more awesomely cool (and perhaps get more downloads).

But it is generally frowned upon to require the user to download and install a plugin in order for your theme to work properly. So what is a designer to do? Of course, he could just try to figure out what the plugin does by examining the code, but most designers don’t have a working knowledge of PHP/MySQL. Another option is to just remove the feature from your theme, but that means you lose that super-cool feature that might have set your theme apart from the others.

Thankfully, there is a solution that is actually quite simple.

A while back, I was working on a custom design for a client, and he requested a very long list of features that were beyond what I could do with a vanilla WordPress install. So naturally, I hit google up for any plugins that would give me the functionality he was looking for. But again, I wanted to deliver a fully functional theme to this client, without having to instruct him to install a list of plugins to get the theme working properly.

After thinking for a while, it hit me: just copy the code from the plugin into the functions.php file of the WordPress theme. I did so, and it worked like a charm! Absolutely no plugins were activated, and I was able to deliver a theme that worked perfectly right out of the box.

A few possible limitations to this method.

I’m not sure about this, but some plugins do add new rows/columns/tables to your database. There is a possibility that a plugin will do this upon activation, and may not work as an integrated function in the functions.php file. Again, I’m not sure about this.

Also, plugins with multiple files, especially plugins that require you place files/folders in multiple locations, probably won’t be easily integrated into your theme. Plugins that only require a single file upload are best.

A few extra tips

  1. Be sure to keep the plugin information in tact when copying the content of a plugin file over to your functions.php file. This way you can keep track of which plugins are installed, and where one ends and another begins.
  2. Be sure to copy the entire contents of the plugin file to your functions.php file. If you’re missing an opening or closing tag anywhere, it could break your theme.
  3. Use obvious separators when integrating multiple plugins. This is sort of like point 1, but you’ll definitely want to use a consistent and obvious marker for when a plugin begins and ends.
  4. Test, Test, TEST!!! Do not just slap the code in last minute and expect it to work. Test it extensively and make sure that your theme doesn’t break. Plugins are buggy sometimes, so you need to make sure it’s working properly before you release it or make it live.

One Final Tip

If you are comfortable enough with PHP, it should be noted that you can put the plugin files in a folder within your theme folder, and simply use your functions.php file to include those plugin files. I like to keep the php calls to a minimum, but you’re certainly welcome to go that route if you are more comfortable with it.

Anyway, I thought that was a cool little tip, and hopefully so will you.

Happy Coding!