In recent posts, I outlined how to create both simple and rounded text boxes within a post. I’ve now created a Colour Selector for both types of text boxes, which allows you to select colours you want, see a preview of the text box, then gives you the code for it. Try it below! (may take some time to load the image)

Colour Selector

Preview:

Code:

Note: If your background is not white, you will need to replace the #FFF with the appropriate hex code for your background colour. If you are unsure what your background colour is, I’d suggest using a Firefox extension, such as ColorZilla or Web Developer.

Adding simple HTML code to a post should be easy, but it can lead to major frustrations. Why? Because the Advanced Editor cleans your code for you. Unfortunately, it often changes your code so that it no longer works!

While I understand arguments for cleaning the code (errors in your HTML could break the Theme), I believe that if you want to add code, then you should be allowed to do so without it being changed.

I use HTML to create rounded text boxes within my posts. Unfortunately, my code fell foul of the Advanced Editor’s cleaning process. Below I summarise some of the solutions I discovered to this problem:

Turning Off The Advanced Editor

There is a simple solution: turn off the Advanced Editor. This should solve all the problems. I know that quite a few users have done this and it may be worth considering if you often add HTML. However, for many users this is not an ideal solution as they want to use the Advanced Editor.

Using An External Text Editor

If you only add HTML occasionally, leave the Advanced Editor on and use it for posts without HTML. Write posts with HTML using an external text editor, then copy the content into WordPress.

WordPress ‘cleans’ your code when the Advanced Editor opens your post. Errors don’t occur the first time HTML is entered and saved, they occur on subsequent saves (the Advanced Editor re-opens the post after the save).

This means you should not have any problem if you:

• create the post content in an external text editor
• create a new post in WordPress (or edit an existing one)
• go to the Code Tab page
• paste the post contents from the external file
• save or publish the post

The code will break the next time you edit the post (immediately if you Save and continue), but there will be no problem unless you save again. If you need to edit the post, do so in the text file, then repeat the above.

Turning the Advance Editor Cleanup Off

If you often enter your own HTML, but still want to use the Advanced Editor, then you might want to consider turning it’s cleanup option off. I stumbled upon how to do this on Thu Tu’s Smacking Wordpress Editor.

To summarize how to turn off the advance editor cleanup:

Download the wp-includes/js/tinymce/tiny_mce.js file using an FTP program and use a text editor to change the following (near line 167) from:

this._def("cleanup", true);

to

this._def("cleanup", false);

Save the file, then ftp it back up to the server, overwriting the original.

Stopping New Lines Before <div>

For me, turning the advance editor cleanup off solved most of my problems. Only one problem remained: WordPress automatically puts a new line before a <div>. In the case of my rounded text boxes, this means that there is a blank line before the first line of text.

Of course this only happens on subsequent saves, not the first one and can be easily solved by manually deleting the new line. However it is annoying to have to do this everytime you edit the post.

I found the following ways to stop this happening, but none of them are really a viable solution for me, because of other problems they introduce:

It is possible turn off the automatic <br />, by Disabling WordPress’ slap-happy approach to <br /> tags. However, this also turns off the automatic <br /> in places where I actually want them.

Urban Giraffe has a plugin by John Godley to disable the WordPress wpautop function, which formats your posts. However, I found that it stripped the blank lines between paragraphs, even if I manually added <p> or <br /> tags. John’s post mentions this problem and gives a link to a WordPress Support page, but the suggestions there didn’t work for me. I only tried this quickly and didn’t persist, so it may be worth you trying.

In both cases, the solutions cause more work than just deleting the new line that WordPress adds before <div>, so I’ve settled for that.

Alternative To Turning The Cleanup Off

Turning off the Advance Editor cleanup, turns off all the cleanup. If all you need is the ability to use <div> without it being turned into <p>, there is a gentler option, outlined in a comment on this WordPress Support page.

To summarise, you need to:

• remove p/-div[*] from line66 of \wp-includes\formatting.php
• remove line 25 from \wp-includes\js\tinymce\tiny_mce_config.php

See the support page for more details on these changes.

This works well, but I’d rather have the cleanup totally off.

Conclusion

So, which of the above methods do I use? Well truthfully, I’m not sure yet. Maybe all of them!

I started by writing my posts in an text editor and I like this for another reason as well: I can create my posts offline. I do have an offline copy of WordPress running on my USB drive, but it’s easier to just open a text editor. Yes, I’m lazy! But I often write for a few minutes in between other things and a text editor is quicker.

I am very tempted to turn the Advanced Editor off, because I add my own HTML to most posts. I don’t really use the Advanced Editor features and I’m comfortable with HTML. However I am persisting with it for the moment - but I have turned off the Advanced Editor Cleanup to make life easier.

So what do you do? I’m interested in hearing of any other methods you know of.

In my previous article I explained how to create simple text boxes, using CSS, to highlight certain text in your posts. While this is easy and effective, what I really wanted was to create text boxes with rounded corners. This article covers one technique that allows you to do this.

Advanced Editor Issues

It should be relatively easy to create rounded corners, and it is, if you have the Advanced Editor turned off. If it is turned on, which is the default, you will encounter problems because WordPress kindly breaks the code.

Check out my post Taming The Advanced Editor, which goes over the options open to you, including how to:

• turn the advanced editor off, if you choose to do so
• avoid the problem by writing the post in an external text editor
• change the settings so that the Advanced Editor is more friendly

Any of the above options should let you create rounded text boxes.

Alternatively, you could use simple text boxes without rounded corners. These work fine because they don’t use the <div> tag, which is one of the things that the Advanced Editor does not allow by default.

The Technique - Nifty Corners

There are many ways to get rounded corners. My preferred solution is Alessandro Fulciniti’s Nifty Corners.

It’s a little cumbersome to code, but I like it for the following reasons:

• it avoids javascript, so it will work for users with javascript turned off (okay I know its not a big deal if people get square corners instead)
• images aren’t used for the corners, so you can change colours via CSS, without creating new images (and the bandwidth will be lower).

Most solutions use javascript and/or images for the rounded corners. If you read Alessandro’s article, you will see that he also has an improved solution that uses javascript.

Alessandro uses the <b> element to get the rounded corners. I’ve gone with <span> even though it’s longer, because the Advanced Editor will convert <b> to <strong> the next time you open the post.

Setting Up The Style

For this technique, we need to add some styles to your external CSS file.

Download the wp-content/themes/yourtheme/style.css file (where yourtheme is the theme you are using) using an FTP program, make a copy of it in case you make a mistake, then use a text editor to add the following to the end of style.css:

.rtextbox{color:#555555; font-family:Arial; background: #EEEEEE; text-align:justify;}
.rtextboxinside {margin-left: 8px; margin-right: 8px; margin-top: 3px; margin-bottom:3px}
.rtop, .rbottom{display:block; background: #FFF}
.rtop span, .rbottom span {display: block; height: 1px; overflow: hidden; background: #EEEEEE}
.r1{margin: 0 5px}
.r2{margin: 0 3px}
.r3{margin: 0 2px}
span.rtop span.r4, span.rbottom span.r4{margin: 0 1px; height: 2px}

The style of the rtextbox class can be changed to suit your needs (ie the colours, font, size, etc). This requires a basic knowledge of CSS, which is beyond the scope of this article, but an Internet search will reveal many sites with information on CSS.

Note: I now created have a Colour Selector, which can create the appropriate code for you. This works for simple text boxes or for rounded text boxes as outlined in this post.

When finished, save the file, then ftp it back up to the server, overwriting the original.

Calling The Style From The Post

To call the style when you are writing a post, go to the Code tab page, find the text to go in the box and add:

<DIV class=rtextbox><SPAN class=rtop><SPAN class=r1></SPAN><SPAN class=r2></SPAN><SPAN class=r3></SPAN><SPAN class=r4></SPAN></SPAN><DIV class=rtextboxinside>

immediately before the text and:

</DIV><SPAN class=rbottom><SPAN class=r4></SPAN><SPAN class=r3></SPAN><SPAN class=r2></SPAN><SPAN class=r1></SPAN></SPAN></DIV>

immediately after it. Don’t leave any spaces between the leading HTML, the text and the trailing HTML. Also be careful to enter it exactly as above (ie uppercase tags, no quote marks) or WordPress will change it to the above anyway and add a blank line at the bottom of the box as a lesson to you!

Once you’ve saved this, you should get a text box with the following style:

Creating a Quicktag button for your text box style

If you are going to use text boxes often, you can set up a quicktag button that calls the rtextbox style for you, instead of you typing the lines in the previous section. Once setup, all you need to do is go the Code tab page, select the text you want and click the quicktag. Easy!

To set up a quick tag for the text box styles outlined above, you need to change the quicktags.js file in the wp-includes/js folder. Download this file using an FTP program, make a copy of it and open it with a text editor. Find the following section (at about line 126):

edButtons[edButtons.length] =
new edButton('ed_more'
,'more'
,''
,''
,'t'
,-1
);

and add this on the line after it:

edButtons[edButtons.length] =
new edButton('ed_rtextbox'
,'roundedbox'
,'<DIV class=rtextbox><SPAN class=rtop><SPAN class=r1></SPAN><SPAN class=r2></SPAN><SPAN class=r3></SPAN><SPAN class=r4></SPAN></SPAN><DIV class=rtextboxinside>'
,'</DIV><SPAN class=rbottom><SPAN class=r4></SPAN><SPAN class=r3></SPAN><SPAN class=r2></SPAN><SPAN class=r1></SPAN></SPAN></DIV>'
,''
);

When you are finished, save the file, then ftp it back up to the server, overwriting the original file.

You’re done! You should now have a roundedbox quicktag in the Code tab page of the editor (you may have to close the browser and open it again first). This quicktag button will add the appropriate code around the selected text when you click it.

This is the solution I use. If you use a different method for rounded text boxes, I’m interested in hearing about how you do it.

Note: I now created have a Colour Selector, which can create the appropriate code for you. This works for simple text boxes or for rounded text boxes as outlined in this post.

Another Approach

Check out Tim Rohrer’s Floating a rounded corner box inside a WordPress post entry article for a different approach to creating rounded text boxes in a post.

In this article, I outline how to create simple text boxes using both inline and external CSS and how to set up a quicktag button so you can use them with the minimum of effort. You’ll be surprised at how easy it is to do!

I often have information that I want to include in a post, without it being part of the main body of the article. For example, additional information that may be useful to readers, but that disrupts the flow of the post.

The ideal way to include this sort of information is in a text box with formatting that sets it apart.

The information is available, but the formatting separates it from the main body of the post in the reader’s mind.

Books and websites often use this technique, so why not inside posts? It’s possible to use blockquotes for this purpose, but I wanted to keep that for quoting other people, so I decided to create text boxes using CSS.

Using Inline CSS

It is simple to use inline CSS to create a box around a paragraph.

First, use the default WordPress Editor (ie the Visual tab page) to write the entire post, including the text you want displayed in a text box. When you are finished, go to the Code tab page and locate the paragraph to go in the box. Add:

<p style="padding:2px 6px 4px 6px; color: #555555; background-color: #eeeeee; border: #dddddd 2px solid">

immediately before the text and </p> immediately after it. Save this and you should get a text box similar to this one:

Note, if you are using the Visual Editor, with the default settings, you cannot use <div> instead of <p>. If you do, WordPress converts it to <p> anyway and may break the code in the process! Unfortunately this means that this method only works for one paragraph - see my Colour Selector, which can create the appropriate code for you. This works for simple text boxes (inline CSS or external CSS) as outlined in this post or for rounded text boxes.

Using External CSS

If you want your text boxes to have a common style across your site, use external, rather than internal, CSS. You set up the style information once, in your external CSS file and reference it each time you add a text box.

If you want to change the style, you only need to change it in one place (the external CSS file) and it will automatically change in every post using this style. With inline CSS you would have to manually change each post.

The external CSS file for the theme you are using is normally style.css in the wp-content/themes/yourtheme folder. Download this file using an FTP program, make a copy of it in case you make a mistake, then use a text editor to add the following to the end of style.css:

.textbox {padding:2px 6px 4px 6px; color: #555555; background-color: #eeeeee; border: #dddddd 2px solid}

The style information can be changed to suit your needs. When finished, save the file, then ftp it back up to the server, overwriting the original.

To create a text box, simply reference the new class (textbox) in a <p> tag. Use the Visual Editor to write the entire post, go to the Code tab page, locate the paragraph to go in the box and add: <p class="textbox"> immediately before the text and </p> immediately after it.

Creating a Quicktag button for your text box style

If you are going to use text boxes often, you can set up a quicktag button for either the internal or external CSS method. This means you don’t even need to type the line calling the text box style. Simply go the Code tab page, select the paragraph you want and click the quicktag. Easy!

I found an excellent tutorial on setting up quicktags by Podz, and a useful article by Lorelle VanFossen. Note Lorelle’s advice on making a copy of your changes so you can add them again if lost when upgrading WordPress.

To set up a quick tag for the text box styles outlined above, you need to change the quicktags.js file in the wp-includes/js folder. Download this file using an ftp program, make a copy of it and open the original with a text editor. Find the following section (at about line 126):

edButtons[edButtons.length] =
new edButton('ed_more'
,'more'
,''
,''
,'t'
,-1
);

and add this on the line after it (if using the inline CSS method):

edButtons[edButtons.length] =
new edButton('ed_textbox'
,'textbox'
,'<p style="padding:2px 6px 4px 6px; color: #555555; background-color: #eeeeee; border: #dddddd 2px solid">'
,'</p>'
,''
);

If you are using the external CSS method, you need to add this instead:

edButtons[edButtons.length] =
new edButton('ed_textbox'
,'textbox'
,'<p class="textbox">'
,'</p>'
,''
);

When you are finished, save the file, then ftp it back up to the server, overwriting the original file.

You’re done! You should now have a textbox quicktag in the Code tab page of the editor, which will add the appropriate code when you select the paragraph and click the quicktag.

Next article: Rounded Corners

As you can see, simple square text boxes are easy and effective. However, what I really want are text boxes with rounded corners. I explain how to create these in my Rounded Text Boxes in Posts article.

Note: I now created have a Colour Selector, which can create the appropriate code for you. This works for simple text boxes (inline CSS or external CSS) as outlined in this post or for rounded text boxes.

This is only my second post since launching www.scratch99.com and I’ve already changed the Permalink structure! In this article, I examine why my original structure:

        /%category%/%postname%/

doesn’t work for me.

Inspiration

After installing WordPress, I was keen to customise it. Whilst searching for information, I found the WordPress Customisation Guide by Elliot Back, which introduced me to the concept of permalink customisation. Note that this is quite dated (October 2004) and the method described to set up permalinks has changed (WordPress now sets up .htaccess for you, rather than you needing to copy code to it).

After reading Elliot’s article, I knew I wanted to change my permalink structure, but the article doesn’t give much information on what to change it to, so I went searching for further information.

This lead me to Fintan Darragh’s Ultimate WordPress SEO Tips, which recommends removing all non-essential tags from the permalink structure and replacing them with keyword rich tags such as %postname% and %category%, which makes your links more search engine friendly.

Decision: /%category%/%postname%/

After searching some more, I found quite a few sites recommending /%category%/%postname%/ as the permalink structure.

This appealed to me. Date information is not particularly important for my blog, as it will be more category than date driven. Using /%category%/%postname%/ would ensure that only useful, keyword rich, information would be included in my links.

So my initial decision was made. I changed the permalink structure and published my first post.

Problem with using %category%

Having made the initial decision, I quickly decided that I’d made a mistake.

Why? My blog is new, so my categories are not yet settled. What I write about may change as my blog matures. I will probably need to reorganise my categories at some point in future, probably several times. Each time I change a category, it will break some of my permalinks, resulting in bookmarks, links to my stories, etc that no longer work.

There are redirect plugins that can help if you do change the permalink structure, but it is far simpler if you pick a suitable structure first and don’t change it.

Therefore, my caution for beginners: Having %category% in your permalink structure is not sensible, unless you are very sure that your categories won’t change.

It seems obvious in hindsight, but when you are busy trying to sort out your theme, the multitude of plugins you can use, etc, it’s easy to overlook this. I’d found a lot of information on the benefits of using category, but none that mentioned any potential problems.

My New Permalink Structure

I’d only made one post and it was just an introduction to my blog (not something people would link to or be particularly interested in). Therefore I decided to change my permalink structure before my second post. But to what?

My first thought was to just use /%postname%/. I have seen articles recommending this for ultimate SEO benefits, and lets face it, it is oh so web 2.0 (think Delicious for example).

However, there are potential problems with this approach, outlined on the WordPress Codex site, so it’s not worth risk.

Instead, I decided to put something short before %postname%. Although the date is not particularly important to me, I decided to use:

       /%year%/%monthnum%/%postname%/

Adding the year and month number wastes only a little space and the information is marginally useful.

Hopefully this will be the last change for me! What do you use for your permalinks? Are there any other traps for newcomers to be aware of?