WordPress theme frameworks have been all the rave nowadays, and rightly so. Everybody’s either using one or rolling their own flavor. Theme frameworks introduce several new concepts to theme authoring that till now, only plugin developers have been taking advantage of. In this article, I’m going to introduce you to the actions API, and break it down so you can understand how it all works. Read more…
In this tutorial we’ll review the basics of CSS and WordPress, such as image alignment and useful classes, and then next week in part two, I’ll show you some examples of seemingly complex things you can accomplish with just a bit of CSS.
To allow for flexibility, WordPress adds a number of CSS classes on elements across the site to make it easier to customize. Probably the most important set of these classes is for post images. A good WordPress theme has classes for left, center, and right alignment as well as styling for captions. It’s really easy to add these styles to your theme. Read more…
By Pontus Etéus
When designing a WordPress site, many people overlook the power of the sidebar. It’s an excellent way to display information, and an even better way to display page-relevant information that doesn’t really fit into the “content” area of that page. Better yet, using dynamic content for the sidebar will make sure the user pays attention to it, since it (generally) displays less cluttered information and is obviously relevant to the page the user is currently browsing. Examples would be posts in the same category, author information, or specific ads for specific categories.
What I will cover here today are various methods of displaying dynamic content for your sidebar. I know a few myself, but I also went ahead and looked for various other methods. Read more…
Since Mashable’s post on 10 ways twitter will change blog design, quite a few Wordpress plugins have been released with the purpose of provided “tweetbacks” for posts. These plugins work quite well, however they lack in true customization and flexibility. So, in order to archive this, we’ll implement a solution of our on.
What we’re going to do
In this tutorial we’ll be using the power of Simple Pie, and Custom Fields to query our twitter timeline and pull in the most recent tweets that include the keywords supplied by the custom field. We’ll also be using a bit of jQuery to make thing pretty! Here’s an example of what the end result will look like.
Note: We’ll be getting down and dirty with some Wordpress and PHP functions, so this tutorial assumes you know all about that. However, if you don’t just follow along step by step and we’ll be don before you know it!
Alright, let’s get started. I’ve prepared a few files to help out, so download them here. Basically it includes a folder called ‘simplepie‘ which you don’t even have to touch, just upload to your theme’s directory along with tweetbacks.php. The other two files, single.php and style.css are templates for you to dissect.
Like I said above, all you have to do is upload the folder ’simplepie’ and tweetbacks.php to your theme’s directory (usually /wp-content/themes/yourthemesname/ ). Open up tweetbacks.php, your theme’s single.php and header.php in a code/text editor and get ready to code!
I like to start at the top and work my way down, so for the first step, we’ll open up header.php and setup jQuery for a bit of effects. Add this bit of code in right before the tag.
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.min.js"></script>
This retrieves the main jQuery file from Google Code. Now that we have that, we can add it the Javascript for the effect we want to archive, which is a nice little drop down. Place this code right below the code above:
<script type="text/javascript">
$(document).ready(function() {
$(".btn-slide").click(function() {
$("#slide").slideToggle("slow");
$(this).toggleClass("active"); return false;
});
});
</script>
Our drop down is now setup. If you prefer not have a drop down, then just skip this step.
Ok, let’s take a look at tweetbacks.php now. It’s our most important file, as it’s responsible for pulling in tweets from our timeline - according to keywords supplied by custom fields - and then displays them properly. I’m won’t go through all the code here (it’s commented pretty good), however there’s a few things worthy of mention.
On line 15 we include a Javascript file, in case your wondering this gives us ajax like updating, which can be set to update every second. It’s quite fun to watch the tweets fly in!
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/tweets.js"></script>
A little bit later, on line 20, we have some more Javascript. This particular line is what queries search.twitter.com for the keywords we set with a custom field of “query” (I’ll touch on this again in a bit). Note the part at the end: “+from:user_name” - this makes sure that only your tweets are queried, Matt Brett style. Change “user_name” to your twitter username.
var feedUrl = 'http://search.twitter.com/search.atom?q=<?php echo get_post_meta($post->;ID, "query", true); ?>+from:user_name';
We’re almost done now. On to step 4!
For the last step, open on single.php and place this code somewhere above or below the comments tag (<?php comments_template(); ?>).
<?php
if (get_post_custom_values('query')) { include(TEMPLATEPATH . '/tweetbacks.php'); } // If query is filled - show twitter mentions.
else { echo '<div class="tweetbacks"><h3>Twitter Mentions</h3><br /><p>Whoops! No tweets to display here!</p></div>'; } // If query is not filled - show error.
?>
What this bit of code does, is check if you’ve actually supplied keywords via custom fields. If you have, then it includes our tweetbacks.php file, if not then it says so. Pretty cut and dry.
That’s it, your done with all the coding stuff! 
It’s quite easy to input the keywords using custom fields - simply put “query” as the key and then in the value field place the keywords you’d like to query your timeline for (e.x. the title of the post, or the tags).
Because we query search.twitter.com we have to use the proper syntax - if you want to search for a couple of different words then we have to use this: twitter+OR+tweetbacks. It will then look for tweets containing either “twitter” or “tweetbacks” or both. If you remove the OR then it will search for tweets containing the exact phrase “twitter tweetbacks”. You can read up on the exact operators on the Twitter API Wiki.
A few things.
The thing to remember about this “script”, is that it’s very flexible and customizable. If your down with coding, go ahead a look through the files - I’m sure you’ll be able to find a way to improve upon it. For reference, the tweet is wrapped in class called “tweets”, the tweet’s content is wrapped in class “content”, and the tweet’s date is wrapped in a class of “date”. Also, it’s set to display the 5 most recent tweets - if you’d like more or less, open up the folder ’simplepie’ and then open up feed.php. Feed.php is the template controlling how the tweets are displayed, so you can mess around with it quite a bit. Check out this list of tags you can use for even more customization.
Well there you have it. Once it’s implemented it runs quite smoothly, and if nothing else provides a bit more of a personal touch to your blog. Let us know in the comments if you have any questions, and if you put it to use on your site, then drop us a link in the comments!
If you’re subscribed to John Gruber’s Daring Fireball RSS feed, you’ve probably noticed that most of his posts are links to other sites. Instead of linking back to his site first and then to the site he’s referring to, you’re simply taken straight to the topic website from the RSS post. In other words, his RSS permalinks are modified to link to the source site instead of his blog, saving an extra click and page load for his readers. John’s site runs on Movable Type, but this function can be easily done with WordPress as well. Read on to find out how to write this simple function. Thanks to Ryan McCue for the code for this tutorial. Read more…
I’m always looking for ways to speed up my development time when creating WordPress themes - whether it’s theme templates, Coda clips, or using both computers to make things go faster. Here are a few things I do to automate my WordPress workflow, from the initial PSD slicing to uploading the final product. Read more…
Our WPCandy v1 WordPress Theme uses a nifty, little script called Scrollovers. A while back when I was developing the theme, I ran into a bit of a problem with the script and WordPress. I wanted to add some bam to the nav with Scrollovers and also use the wp_list_pages tag in order to keep the dynamic nature of the navigation. But see, with Scrollovers, the anchor for a link requires a class and type value of “scrollovers”, which isn’t possible to accomplish with WordPress. As a result, I moved on by simply hardcoding the links in the navigation, as below, and provided the appropriate documentation for users.
By Sumesh from Blog Creativity, a blog about blogging tips, usability in design, SEO and WordPress (theme/plugin reviews, hacks and WordPress optimization).
WordPress is often praised for its inherent SEO capabilities. The option to use post slugs, clean and valid xHTML (mostly) etc. are some of the reasons for the praise.
However, anyone who inspects a WordPress theme closely will notice that there are several dozen weak points in WordPress themes (in the default theme, freely available themes and even paid themes). Some of these are caused by WordPress core functions (which were developed 5 years ago, since when SEO has evolved), while others are due to designers not willing to brave the choppy waters of SEO experimentation.
Modifying the core functions require extensive hacking (which can be done with proper tutorials), but the changes will be erased during WordPress upgrades. So, the subject of this post shall be mostly about those mistakes caused by faulty theme coding.
In this series of posts, you can read on what the SEO mistakes are, and how to solve them.
Note: The technical aspects of the solution (like code required for various modifications) is beyond the scope of this post. Michael tells me that WPCandy readers are mostly capable of doing such tweaks by themselves, but I will be glad to troubleshoot your problems (if you run into any) at the support forum at my blog.
