WordPressGarage.com

Challenge: how to display only authors who have written in a specific category?

Hi all - I was wondering if one of you can help us find a solution to a feature we would like to add to a WordPress site:

The site in question has multiple contributors. Most are dedicated to certain categories. We would like to automatically display on a category page only the authors who have written articles in that particular category.

For example, let’s say we have a category called “Cucumbers” and a category called “Tomatoes.” When someone clicks on the Cucumbers category we would like only the authors who have written posts categorized as Cucumber posts to appear, and on the Tomatoes category page, we would like only the authors who have written Tomato category posts to appear. There may be some overlap between the pages, since some authors may write posts for both the Cucumber and the Tomato categories.

One solution we thought of is to call the category we want and the number of posts from that category and then display the list of authors. The problem is it shows duplicate authors. Here’s the code:

<?php query_posts('showposts=20&cat=3'); ?>
<?php while (have_posts()) : the_post(); ?>

<?php the_author_posts_link (); ?>

<div style="clear:both"></div>
<?php endwhile;?>

Is there a way to prevent duplicate authors from appearing? Or is there a better way?

Thanks in advance for your help.

Posted in Shorties | Tags: multi-user | 10 Comments »

Matt presents WordPress 2.5 in screencast

Matt has created a screencast that presents some of the new and cool features of WordPress 2.5. The screencast fills a gap that has existed until now with regards to people writing and talking about the new version using only screenshots and descriptions. Seeing the system live really brings home how WordPress 2.5 signals a pretty new approach to WordPress blogging in so many ways.

Here are some of the points that I found most interesting:

• The dashboard is fully editable. I mean fully. Fabulous.
• One little click and the text editor becomes full screen. Usability heaven.
• The interface has all sorts of Ajaxy stuff, which seems to make uploading and interacting with dialogue boxes a lot smoother…and prettier.
• A built-in photo gallery which looks great. This gallery allows you to add groups of photos right from the text editor and create albums and galleries. You can see examples on Matt’s blog
• The new tagging interface is way more user friendly, with the ability to easily add and remove tags, and my favorite new feature: auto-suggest. This ensures that you don’t end up with duplicate tags within your blog, like “blog,” “Blog,” and “Blogs” by suggesting existing tags to you as you type. This is really great because it means I can knock one more plugin off of my “always use” plugin list - this time it’s Simple Tags, which is a great plugin, but I’m always happy to use less plugins.
• Matt had five wisdom teeth pulled, and he sounds like it. Poor Matt. I know how that feels, and all I can say is that I hope you have a really speedy recovery, and “Refuah Sheleimah” (right Raanan?).

Matt also points out that the community has started a list of which plugins work with WordPress 2.5, and which don’t, and from what I can see most of the plugins I use on a regular basis are compatible. Phew.

Here’s the screencast, but I suggest you visit Matt’s original post on this subject at the WP developer’s blog since the quality is much better there:

Posted in News & Views | Tags: upgrades | 3 Comments »

Ryan at WordPress mentions Farsi and Hebrew developers for their work on WP admin

Ryan on the WordPress development blog (which is running on Prologue, very nicely I might add) has basically congratulated the “Farsi and Hebrew translation folks” for their hard work making the WordPress admin look good in right-to-left languages.

I’d like to take this opportunity to say that the Hebrew version of WordPress exists mostly, of not completely,  thanks to Ran Hartstein. Ran always makes sure the Hebrew speaking audience gets their Hebrew version of WordPress as quickly as possible. Of course, the extended Israeli WordPress community adds a lot of value to the usage of WordPress, with many right-to-left themes, plugins, and the vibrant and helpful wpheb google group.

Posted in Shorties | Tags: Hebrew | 1 Comment »

Plugins and hacks for improving the WordPress TinyMCE editor

The WordPress TinyMCE editor mercilessly strips tags at will. Some will tell you that in order to avoid this problem you should disable the visual editor, but this is not a realistic solution since a. Many people feel more comfortable using a visual editor and b. The editor should not remove code from the coding editor, period.

This problem is becoming even more acute with the proliferation of embeddable services available on the web for easily sharing rich content like videos, slideshows, and documents. In order to display these services on your blog, you need to embed the code within your post, but doing so will often break your blog layout since the divs are stripped.

There are many topics on the WordPress forum related to this issue, none of which have been resolved satisfactorily. The question is - do the folks behind WordPress have any intention of fixing this problem?

How to fix it

A few days ago I wrote about a way to make the WordPress TinyMCE text editor stop stripping div tags. The original code that I wrote didn’t work, but I subsequently found a solution that I tested and did work, and have since corrected the original post.

While I was searching for a way to get the hack to work, I found a bunch of other hacks and plugins that help you force the WordPress editor to stop stripping tags, or show you how to customize the editor. So here are some other options you may find useful:

Plugins:

1. TinyMCE Advanced - Among the many things this plugin does, it says it supports XHTML specific tags and (div based) layers. This may mean that it doesn’t strip div tags.
2. Disable wpautop Plugin - This plugin disables the WordPress wpautop function. The wpautop function changes double line-breaks in the text into HTML paragraphs (<p>…</p>), and this plugin disables that annoying feature.

Hacks:

1. To stop the WordPress editor from stripping out div tags, replace line 25 in the wp-includes/js/tinymce/plugins/tiny_mce_config.php file with the following: $valid_elements = ‘#p[*],-div[*],-strong/-b[*],-em/-i[*],-font[*],-ul[*],-ol[*],-li[*],*[*]‘;
   (This method was described in my previous post on this subject.)
2. To stop the editor from removing line breaks, open wp-includes/formatting.php, and change line 402 to this: $content = str_replace('<br />', '<br clear="all" />', $content);. Alternately, you can use <br clear=”none”/>.
3. To get the advanced toolbar functions to open by default, instead of needing to click on the Show/Hide Advanced Toolbar button, open wp-includes/js/tinymce/tiny_mce_config.php and change line 34 to read $mce_buttons_2 = apply_filters('mce_buttons_2', array('formatselect', 'underline', 'justifyfull', 'fontselect', 'separator', 'pastetext', 'pasteword', 'separator', 'removeformat', 'cleanup', 'separator', 'charmap', 'separator', 'undo', 'redo')); (via 1000 Miles or Bust)

That’s it for now. I’ll probably update this post as I find more information on hacking the TinyMCE editor.

Posted in Tips | Tags: WYSIWYG | 7 Comments »

Amazing hack for fixing the code changing habits of the WordPress editor

Update March 23, 2008: The code that I originally wrote below based on Roland O’Connor’s post didn’t work. I subsequently found this WordPress Forum topic, which had the correct code to replace, and I’ve corrected the post below.

Also, I wrote a follow-up post to this one with more tips on using plugins and hacks for fixing this editor problem. So read this post, and then check out Plugins and hacks for improving the WordPress TinyMCE editor

Have you ever embedded code in your WordPress editor, only to find that saving the post causes the code to change and your whole blog’s layout to break?

Have you ever tried to use divs in your WordPress editor, only to find that all your div tags have been replaced with p tags?

Well, despair no further! Roland O’Connor has written about an easy solution that fixes this problem.

Here’s what you do:

1. Find the file wp-includes/js/tinymce/tiny_mce_config.php.
2. Find the line
   $valid_elements='p/-div[*],-strong/-b[*],-em/-i[*],-font[*],-ul[*],-ol[*],
-li[*],*[*]‘;
3. Change it to
   $valid_elements ='-strong/-b[*],-em/-i[*],-font[*],-ul[*],-ol[*],-li[*],*[*]‘;
$valid_elements = '#p[*],-div[*],-strong/-b[*],-em/-i[*],-font[*],-ul[*],-ol[*],
-li[*],*[*]‘;


Make sure all the code is on one line. That’s it!

The only problem with this hack is that you have to remember to redo it every time you upgrade your WordPress blog. Unless of course someone feels like making this into a plugin…hint hint, wink wink, nudge nudge.

Posted in Tips | Tags: WYSIWYG | 10 Comments »

Publishing WordPress posts in two columns

We’re currently building a site on Adii’s Premium Gazette WordPress theme (this is an affiliate link). In my opinion, it’s an awesome theme particularly because of the design. However, we installed it on the client’s server of choice, and the posts on the homepage just wouldn’t update. We tested it out on different servers, as well as on the client’s server without any plugins or changes, and it worked on other servers but would not cooperate on the client’s server.

The home page of this WordPress theme has two columns of posts. This is a really handy layout, but we realized that the code being used to create this layout was causing all the problems. So we needed to find another solution.

cre8d design has a tutorial on how to organize posts into two side-by-side columns in WordPress. It’s based on adding a “switch” that tells WordPress if a post should appear in the first column or the second column. Basically, the code is saying the following:

Are we in the first column?
Yes: Move to the second column.
No: Move to the first column.

The code calls styles from your style sheet that tell the left column to float left, and the right column to float right.

cre8d’s demo page for this technique:

We also needed to exclude two categories from appearing on the homepage, so here’s a simplified version of the final code we used to replace Adii’s code in his default.php file:

<div class="box"><?php query_posts('showposts=4'); ?><?php $hol = 1; ?>

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

<?php if (in_category('3')) continue; ?>

<?php if (in_category('4')) continue; ?>

<?php if ($hol == 1) echo "<div class=\"row\">"; ?>

<div class="post hol<?php echo $hol;?>" id="post-<?

php the_ID(); ?>">

<?php if ( get_post_meta($post->ID, 'thumb', true) )

{ ?> <!-- DISPLAYS THE IMAGE URL SPECIFIED

IN THE CUSTOM FIELD -->

<img src="<?php echo get_post_meta($post->ID, "thumb",

$single = true); ?>" alt="" />

<?php } else { ?> <!-- DISPLAY THE DEFAULT IMAGE, IF CUSTOM

FIELD HAS NOT BEEN COMPLETED -->

<img src="<?php bloginfo('template_directory'); ?>

/images/no-img-thumb.jpg" alt="" />

<?php } ?>

<h2><a title="Permanent Link to <?php the_title(); ?>"

href="<?php the_permalink() ?>" rel="bookmark">

<?php the_title(); ?></a></h2><p><?php the_excerpt(); ?></p>

<?php if ($hol == 1) echo "</div>";

(($hol==1) ? $hol=2 : $hol=1); ?>

</div><!--/post-->

<?php endwhile; ?>

<?php endif; ?>

The following styles need to be added to your style sheet so that the columns float left and right:

.row { clear: both; }
.hol1 { width: 200px; float: left; padding: 0 10px; }
.hol2 { width: 200px; float: right; padding: 0 10px; }

Posted in Code Snippets | Tags: posts | 9 Comments »

What we can look forward to in WordPress 2.5

Normally I don’t get excited about WordPress updates because they tend to be pretty incremental (and cause a lot of stress). WordPress upgrades usually add a few features and a lot of bug fixes, which is great but not very exciting.

But I have to admit that I just took a look at Matt’s post on what lies in store in WordPress 2.5, and I’m actually excited about the new version. People like the team behind Automattic always amaze me with their ability to think outside of the box, and innovate beyond what has been expected and accepted.

Those of us who have been using WordPress for a while are used to the WordPress admin, to the point where we probably don’t feel like much is lacking. It seems that new users find the admin confusing and cumbersome, and therefore Automattic has streamlined it in a way that is smart and intuitive.

So here’s an overview of what’s in store as reported by Matt, with my commentary:

The Dashboard

I barely glance at the Dashboard when I enter the admin of my blogs. Most of it is useless, with the incoming links section being the only thing that grabs my attention. In 2.5, the WordPress dashboard will focus on the most relevant tasks at hand for the blogger: a quick summary of what’s published and scheduled for publication, the latest comments and incoming links, blog stats, and WordPress updates and news.

A really exciting addition is the ability to add our own RSS feeds to the Dashboard. That means that users can set their Dashboard to present them with information related to their blog topic, for example, or a project management blog can pull in RSS feeds related to their project. Cool.

Navigation

As I mentioned above, as a longish-time user of WordPress, the navigation in the admin doesn’t bother me. I know where I need to go to get things done, but apparently the navigation can be confusing, and could be improved. So they’ve improved it by separating the main tasks that we do, like writing, managing posts and pages, editing the blog’s design, and managing comments, from the tasks that are used less often.

The only thing I would have done differently is move the blog design editing section to the secondary section. I don’t know about you, but I NEVER edit my theme files from the admin. That just seems too risky. I prefer to make all changes offline using a good editor so that all of the most current theme files are on my hard drive, and if I make a mistake, I can easily undo it.

Write Post/Page

The new Write Post/Page page loses a lot of the clutter of the current layout. Matt says that the new write screen “only displays the information that you’ll use most often.” This concerns me a bit, because I actually use a lot of the stuff that is there, and if I don’t use it all the time, I like to know that it’s there. Hopefully the new layout gives users easy access to everything, even the stuff used infrequently.

What is cool is that the Write page remembers how you left it the last time, and what’s even cooler is that the visual editor now has a full-screen mode!! Although I rarely write posts within WordPress anymore (I use and love Windows Live Writer), the full screen mode will make writing posts within WordPress a heck of a lot more enjoyable than scrolling within the current tiny editor. Matt says this is his favorite new feature, and I have a feeling I’m going to agree.

Manage Posts/Pages

The changes to the management pages seem to be in terms of removing clutter and making useful information more accessible. It’s hard to judge this one without seeing it, but I imagine it will be an improvement in usability.

Colors

The most visible change to the WordPress admin is, of course, its style. The fonts have changed a bit, and the colors consist of lightish blue and lightish orange. While I am a sucker for change when it comes to web apps and the like, these colors seem kind of washed out and hospital-like. But no worries! If you like the old look you can restore them by selecting “classic” under Options.

Even better - you can now have a per-user Admin color scheme! That means that every user on a blog can use their own stylesheet in the admin. PlanetOzh has a little tutorial explaining how.

Testing it out before release

I don’t know if Automattic has ever done this before, but Matt has asked people to test out the latest release and report back with bugs. This is a smart move, since generally new versions of WordPress almost always need to be upgraded immediately to fix bugs and security issues. Hopefully this strategy will mean that we can enjoy our new version of WordPress for a while before having to upgrade.

Summary

What’s amazing about WordPress is that they manage to continually add more features while decreasing clutter. The addition of features does not translate into a weighed-down, clunky interface, which is more than a lot of web applications can claim. I can’t wait to try it out!

Posted in News & Views | Tags: admin, upgrades | 2 Comments »

Like Obama? Get your Probama WordPress Theme

This has got to take the cake: now all those die-hard Obama supporters can get their very own, free, beautiful Probama WordPress theme, thanks to Darren Hoyt and his pals at Category 4.

I have to admit that I find Americans’ devotion and passion for political candidates to be unusual. I mean, political candidates are just people, and even worse, they’re politicians. Being a politician means making sweeping, glorious promises to solve world hunger and give free health care to every person who sets foot on American soil, and then breaking all those promises once they get into office since a) They can’t possibly keep these promises which are unrealistic and not based on anything but their ability to say whatever they want and b) They may know this and actually have no intention of fulfilling these promises.

In any case, you’ve got to give it to Obama who really has managed to capture the hearts and dreams of so many Americans. From the outside, it almost seems like there are only two candidates: Clinton and Obama, and from the outside Obama really does seem more inspiring. I mean, the guy’s gotten people to write songs for him.

And now he’s got his very own WordPress Theme. While this theme is only really useful for the small percentage of world citizens who love Obama so much that they’d build a site for him, the theme is really beautiful. The header and background image are great, and the layout and structure are eye-catching and have a lot of potential.

Probama Theme for non-Obama sites

So for those of us who aren’t Obama devotees, this theme has a lot of potential for use as a general blog or news site. The YouTube, audio and flickr sections on the home page are great, as is the four column footer. I like the list of recent articles at the end of the home page too, and the drop-down menu is fabulous. The details like the flourishes in between posts, the date style, and even the button styles all add up to make this an eye-catching and useful theme.

On a side note, the markets are predicting that Obama’s going to win, and apparently the markets predict outcome better than polls. Take a look at how the Obama stock is doing vs. the Clinton stock on Intrade:

Probama WordPress Theme

P.S. Did anyone notice that one of the singers in will.i.am’s “Yes We Can” video is speaking in Hebrew? Watch a bit, and then a woman with long hair says “Ken, anu yecholim,” which is Hebrew for “Yes, we can.” Anyone know who she is?

Posted in Themes | Tags: silly stuff | 11 Comments »

Create drop-down menus with WordPress plugins and themes

Drop-down menus are a great way to improve the usability of your site. They allow you to offer more information without taking up too much real estate, as well as organize your content in a useful way for your readers.

But coding a drop-down menu can be a bit of a PITA (no, not the bread that holds the falafel). Lucky for us, some of our fellow web-geeks have created easy ways for us to add drop-down menus to our websites and WordPress blogs.

WordPress Drop-down menu plugins

1. The Linux and Web Development Blog has a WordPress plugin that adds a drop-down menu to your navigation bar on your WordPress blog. In order to activate this plugin, you need to upload it, activate it, and add the following code snippet to your header file:

<?php
if (function_exists('get_menu'))
get_menu('topmenu');
?>

Once you have done this, log in to your site, and customize the menu on the CSS Menu option page.

2. Ryan Hellyer has developed a super-duper plugin/generator combo that allows you to create and heavily customize a drop-down menu in your WordPress blog. Features:

• Easy to customize styles with his handy Suckerfish Dropdowns Generator
• W3C valid HTML and CSS
• Only uses Javascript for annoying browsers like IE6
• If you want your visitors to be able to access your menu with their keyboard, Ryan offers the “Suckerfish Javascript for keyboard accessibility” code for including in your site.
• Compatible with every existing browser (almost) and their uncles.

You can’t say Ryan’s not thorough! See the drop-down menu in action on the Suckerfish Dropdowns Generator page.

To use his Suckerfish WordPress plugin:

1. Download the plugin from his site and activate it.
2. Go over to his Suckerfish Dropdowns Generator and customize at will. You can change pretty much every style used for the drop-down: colors, background image, font sizes, families, weight, opacity, padding, etc. Ryan has also prepared 10 ready-made styles for drop-down menus that you can use instead of fiddling around with your own styles.
3. Once you are ready, click Submit Query and the generator will produce some CSS code.
4. Coyp and paste the code into your WordPress admin (under Options). The generated styles will only work with unordered lists with an ID of #suckerfishnav. In addition, this whole plugin/generator thing may not play nice with our least-favorite browser (IE6), so Ryan recommends using his handy Suckerfish Javascript for Internet Explorer code with your site.

3. Dtabs (Dynamic Tabs) wordpress plugin by David Burton allows themes to include an optional user controlled dynamically tabbed navigation system with the possibility of drop down menus. This plugin only works with dTab enabled themes, of which there is currently one: Kubrick Tabs. However, the author provides instructions on how to dTab enable a theme on the plugin page. You can see a working example on the author’s site. The plugin is also available on the WordPress.org plugins directory.

4. A few more drop-down menu plugins:

• wp_jquery_dropdownmenu plugin
• Wordpress CSS Drop-down Menu

WordPress Themes with drop-down menus

1. The Jillij theme is a one-column theme based on Kubrick that has transformed the vertical sidebar into a horizontal drop-down navigation bar that appears under the header image. The drop-down menu is based on Widgets, so you can modify what appears on the nav bar by changing the widgets.

2. Ryan Hellyer has also created a theme that has his Suckerfish menu built-in: Aqua Vaccinium WordPress theme. I have to admit that I don’t love the look of the theme (sorry Ryan!), but the built-in Suckerfish menu can be useful for people who prefer not to use a plugin.

(Ryan does have a theme which I really like, which he uses on his blog: Hellish Simplicity.)

Posted in Plugins, Themes | Tags: navigation, tabbed navigation | 19 Comments »