Realespace

Most Wordpress themes use pages for navigation. This is fine for most single user blogs, but when you want to really start expanding what Wordpress can do, look at using categories for your main navigation.

Both pages and categories are parent - child based, meaning you can create a top level category and then create categories under that main category. For an example of navigation with top level categories and sub categories, go to money.cnn.com/real-estate. Most media, or newspaper based websites use this format, and will really open up the possibilities of your blog.

I would not recommend starting with this format without any content. Make sure you have several posts. This type of blog needs a lot of content. They do not have to be well categorized because you can always change the categories. But if you are starting out and have no content, the first thing to do is organize your categories.

If you want to try out the code, just make a couple parent categories and then make a couple subcategories.

go to your theme folder and open header.php. comment out wp_list_pages(), and add the code below

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

$defaults = array(
'show_option_all' => '',
'orderby' => 'name',
'order' => 'ASC',
'show_last_update' => 0,
'style' => 'list',
'show_count' => 0,
'hide_empty' => 0,
'use_desc_for_title' => 1,
'child_of' => 0,
'feed' => '',
'feed_image' => '',
'exclude' => '',
'hierarchical' => true,
'title_li' => '',
'echo' => 1,
'depth' => 1
);
 
wp_list_categories($defaults);

This will list only the top level categories. We do not want to display subcategories until we have clicked on a top level category. You do not need to list all defaults, but you do need to set depth to 1 in order to only show parent categories and set the title_li to nothing.

For more information about wp_list_categories click here

The next step is to display the subcategories when we have chosen a top level category. This is a little tricky because we have to get the category id for the parent category from the first post in that category.

directly after the main navigation make a subnavigation and add this code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

$cat = get_the_category();
$id = $cat[0]->parent;
 
$defaults = array(
'show_option_all' => '',
'orderby' => 'name',
'order' => 'ASC',
'show_last_update' => 0,
'style' => 'list',
'show_count' => 0,
'hide_empty' => 0,
'use_desc_for_title' => 1,
'child_of' => $id,
'feed' => '',
'feed_image' => '',
'exclude' => '',
'hierarchical' => true,
'title_li' => '',
'echo' => 1,
'depth' => 1
);
 
if($parents[0]->parent && !is_home())
{
echo "
<ul>". wp_list_categories($defaults) ."</ul>
";
}

The above code first gets the category of the first post in the main category. Then gets the parent id. Then in defaults we set the child_of to the id of the parent. This will get us all children of the main category. We do not want to show any children categories on the home page and if there are no posts we do not want to show any children categories.

That is all that is needed to make a category based navigation. I find it give many more options for your blog. To really customize your blog, you can make separate php files for each category. There is a category hierarchy Wordpress looks for.

1. category-id.php - id = category id (6)
2. category.php - this will handle all categories
3. archives.php - this is probably used the most
4. index.php - last but not least

I would say that 90% of all bloggers have at some point tried to paste a Microsoft Word doc into their wordpress blog only to find a formatting nightmare. This is because word docs, or open office docs add some of the worst formatting ever. If you want to see it, just grab a Word doc, and past in visual mode, then click on code in the editor. You will see almost every line will have styling that you will spend hours trying to remove.

The doc formatting is bearable in your blog, but in your RSS feed it will cause huge problems. In most cases you will not find out about the problems untils days later since most bloggers do not check their RSS feed’s health on a daily basis. The biggest issue is the back tick.

The back tick on my laptop is located right next to the number 1 button. it is shared with the tilde key. The single apostrophe (single quote) is shared with the double quote next to the enter key. Your keyboard might be different

In word docs the apostrophe is a back tick, but web encoding does not like the back tick. If you copy and paste a word doc directly into a Wordpress blog and there are word’s like don’t, can’t, isn’t, etc… you have to manually replace the back tick with the single apostrophe. There are other formatting issues that will break your RSS feed like trademark symbols, but all the other are rare.

The easiest way to paste word docs into your blog is with Wordpress’s “Paste from Word button” located on your visual editor. It is hidden by default.

.

By following the steps above, you can paste your word doc into the visual editor with all the formatting word doc formatting removed. This will leave the tags that are allowed by Wordpress.

This is a big improvement over the other ways to format.

• copy and paste into notepad, then copy and paste to your blog. This removes absolutely all formatting
• copy and paste into google docs. This does not remove the formatting but it is a little easier to format from their. Then copy to your blog
• switch the visual editor to “code” view, then paste.
• in Word, select all ctrl+a, then ctrl+space to remove formatting
• in Open Office, ctrl+a to select all, then ctrl_shift+space to remove formatting

Technorati is one of the must use when blogging. We get a majority of our traffic from Technorati so when they say do something we do it.

Technorati first mentioned the patch in Feb, but not they are demanding a upgrade because the exploit is causing too many spam links in the search results.

If you have not upgraded to Wordpress 2.5, or patched your 2.3.3 installation do so now.

Link to Wordpress 2.3.3 patch for xmlrpc.php exploit

Link to Wordpress 2.5 install or upgrade

This feature has never been implemented in Wordpress so I can’t get too frustrated, but it seems like one of the most obvious features that is not included. I’m talking about hiding pages from navigation.

When your theme has a horizontal navigation menu, you are limited to the number of pages listed because it will break your CSS once you go over the limit and they fold under. In the function wp_list_pages() you can define which pages you want to include and hide, but you have to do it manually by adding include=2,4,5…. (2,4,5 = page id’s)

Is it just me, or does the ability to hide pages from the navigation menu seem like an important feature?

A simple solution is to add a column to the manage pages section that has a checkbox to select which pages will be visible in the navigation menu. The pages are still accessible and published, just not visible in the menu.

I wrote a post and added updated wordpress files to a .zip while I was with Realivent. The post was written around Wordpress 2.2, so if you want to try it with Wordpress 2.5, good luck. It will probably still work, but I’m not guaranteeing anything. When I get some time, I’ll try it myself.

Wordpress have a nasty habit of stripping html markup from posts. Most bloggers won’t really notice this because they are not posting html tags. I ran into this problem after I activated the wp-syntax plugin for code highlighting and formatting. When you want to highlight code with wp-syntax, you have to add <pre lang=’php’ line=’1′> to your posts using the code tab, not the visual tab in your blog post editor.

Wordress will only accept <pre> with no attributes. If you add them, Wordpress will strip them. The way around this, an any other code problem is to edit the kses.php file located in the wp-include folder. Once in that file, look for this:

$allowedposttags = array(
 
     'address' => array(),
 
     'a' => array(
 
          'href' =>; array(),
 
          'title' => array(),
 
          'rel' => array(),
 
          'rev' => array(),
 
          'name' => array()
 
),

It actually goes on and on, but I am only showing the top 2 tags. As you can see when you add an tag to a post (link to another website) you can only add the 5 attributes href, rel, name, title, and rev. If you add something like “style = ‘#cc0000;’” it will be stripped.

Here is the section I needed to update to get wp-syntax to work:

'pre' => array(
 
      'width' => array(),
 
      'lang' => array(),
 
      'line' => array()
 
),

Default only allows a pre tag to include width. I added lang, and line. Also, you must add => array() to each line. It is pretty self explanatory.

Also, a thanks goes out to Gergely Hodicska for the post, and fix, for escaping characters. Works like a charm.

Designing Wordpress themes can be a lot of fun when working with one browser, but nothing is more aggravating then looking at your theme in Firefox, then IE and finding the CSS is not formatting properly. I personally use Firefox for all browsing and when I design, I design for Firefox first then IE. I should probably design for IE, and then Firefox, since Firefox can handle formatting much better then IE6/7.

There is a little CSS hack you can use when your themes have formatting issues. It’s called the underscore hack and it involves adding an underscore before the CSS attribute so IE will interpret it but Firefox will not.

Example:

1
2
3
4
5

.navigation
{
margin-bottom: 0px;
_margin-bottom:10px; /* IE Fix */
}

I often run into this problem working with the navigation menu. Most recently the navigation bar was about 10px lower in IE then Firefox. The above code fixed the formatting issue for both browsers.