Best WordPress WYSIWYG Editor

August 26th, 2010 by Keith from shrewdies | 5 Comments | Filed in Function
When I explained how NicEdit has become my personal best WordPress WYSIWYG editor, I mentioned some issues.

Whilst the best solution would be to delve into the NicEdit code, and change the parts that present problems, I have found workarounds that mean I can get by without this for now.

In fact, I am not certain if this is truly a NicEdit issue, or the way WordPress builds it’s comments forms. I’ll leave the strict coding debate until I’ve fully investigated why it works in FireFox but not in MicroSoft Internet Explorer (MSIE).

In my first investigation I explained how wrapping elements in HTML Paragraph tags will break NicEdit under MSIE. The symptom is a small disabled NicEdit toolbar that renders it useless. I explained in that article about modifying the comments.php to remove the paragraph tags (or change them to DIV tags) re-enabled NicEdit. However, WordPress 3 has changed the way the comments form is built.

The good news is that there is no need to hack the WordPress core that serves the form. All that is needed is a simple change to the way the comments form is called in your theme.

Restore NicEdit As Your MSIE WordPress WYSIWYG Editor

If you are using a pre-WordPress 3 theme, your comments form is built directly in comments.php. Current themes replace many lines of code with a simple call to a new function – comment_form().

This is much tidier, but the default settings are very NicEdit unfriendly. Not only does it retain the MSIE-breaking paragraph tags, but default width settings do not get passed to MSIE at the toolbar rendering stage.

Additionally, the default form displays the allowed HTML tags. This is something very dear to my heart in a normal comments textarea. Visitors should be told which tags are allowed to save those frustrating times when you type a long and interesting comment, only to see it posted as garbled rubbish because the pre or code tags are not allowed. With NicEdit, such vital information is unnecessary, as the tags are all processed before the code is saved, and you can even configure which buttons are available.

So how do we get the comments form to display NicEdit properly?

The call to comment_form() is near the end of comments.php in the theme editor area. If you are not happy with editing themes, get in touch with the theme author and ask them to add comment form parameters in the theme options. Or if the theme is not supported, then let me know, and I’ll produce a NicEdit enabled version of it.

If you cannot find comment_form() then chances are that you have an older theme, in which case search for the textarea line, and adapt the following.

The comment_form() function allows most aspects of the comment form to be changed by passing an array of parameters. More details are in the WordPress codex, but all you need to do is paste the following between the brackets() of the comment_form function:

array('comment_field'=>'<div class="comment-form-comment"><label for="comment">' . _x( 'Comment', 'noun' ) . '</label><textarea id="comment" name="comment" style="width:350px" rows="8" aria-required="true"></textarea></div>','comment_notes_after'  => 'Thank you.')

This simply changes 2 settings, comment_field and comment_notes_after by slightly changing the default WordPress code. I’ve cheated a little by including an inline style statement – my site is about getting things done quickly, and then we can argue with the purists to find more elegantly coded solutions. The important thing is that the following 3 NicEdit defeating issues are overcome:

  1. p is replaced with div to prevent MSIE “Unknown runtime error Line: 8 Char: 721″
  2. cols=”45″ is replaced with a width setting. Alternatively, you could probably set this in the style sheet, but I have not tested this.
  3. The allowed tags are replaced with a simple ‘Thank you’ message. You could change this to something else, or just the quotes to remove it entirely.

Change Defaults To Make NicEdit Your Best WordPress WYSIWYG Editor

In my previous article I explained the quick way to enable NicEdit to be your editor for WordPress comments or Question2Answer questions, answers and comments. Posting the default code certainly works, but you are at risk of losing the editor if the NicEdit site is unavailable.

The first thing you should do is copy NicEdit to your own server, and amend the first NicEdit line in your header.php to: 

<script src="path-to-your-nicedit/nicEdit.js" type="text/javascript"></script>

If you like to keep images in a separate folder from js files, you will also need to change the NicEdit defaults. You will probably need to do this anyway to change the default buttons and add extra features. So, amend the second NicEdit line to: 

<script type="text/javascript">bkLib.onDomLoaded(function() {nicEditors.allTextAreas({iconsPath : 'path-to-your-nicedit/nicEditorIcons.gif'})});</script>

In this instance we are only changing the iconsPath, but any nicEdit parameters can be amended in a comma separated list.

If you’ve implemented these improvements and still have unresolved issues, please let me know below. As I mentioned earlier, I will soon publish complete step-by-step guides for NicEdit enabling Question2Answer and WordPress, combined and in isolation. I’d appreciate your help in making it as complete as possible by clarifying any issues you may still have.

Tags:

WordPress Default WYSIWYG Editor

August 26th, 2010 by Keith from shrewdies | 2 Comments | Filed in Form, Function
My search for the perfect WordPress Default WYSIWYG editor is far from over, but at least I have a stable solution that works.

I’ve switched between NicEdit and TinyMCE for a few months. I like the simplicity of NicEdit, and had it working nicely on WordPress sites.

Then all sorts of weirdness started happening when I tried the beta of Q2A on a development site. I’d taken what I thought were sensible precautions. The site in question was new and had no visitors. I prefer to experiment with this sort of site if possible, as running development sites under localhost on my PC is not always a good representation of the real world. I had an absolute nightmare with this, and suspected all the new stuff I was trying out (beta Q2A and beta WordPress 3.0!)

Turned out it was nothing to do with the beta software, and everything to do with lousy server configuration backed up by lousy tech support from Bl** Host.

In the process of trying to get back to something that worked, I tried different settings on this site. I didn’t realize that I’d left WYSIWYG turned off here until vince told me.

For now, I’ve left tinyMCE alone. It looked like a good solution, but there are a whole bunch of formatting issues, so I’ve decided to focus on NicEdit.

I use it to make WordPress commenting better, and for Q2A. Within those setups (either of Q2A, WP, or both) there are installation and configuration options, so I’ll try to cover all the permutations.

Preparing Q2A

Q2A strips out any html code from multi-line text, so we have to tweak it. If you are uncomfortable with tweaking code, raise the issue on the Q2A site, and ask for an Admin option to disable it.

We have to edit the qa_html() function in qa-base.php, which sits in the qa-include folder. At line 84, I simply comment out the string manipulation, and set the return value to the string that was passed in:
if ($multiline) {
// $html=preg_replace('/\r\n?/', "\n", $html);
// $html=preg_replace('/(?<=\s) /', ' ', $html);
// $html=str_replace("\t", '    ', $html);
// $html=nl2br($html);
$html=$string;
}

If you do not do this, NicEdit will still work, but the HTML tags will get stripped before your questions, answers, or comments get saved.

This change will need to be reapplied whenever you upgrade or reinstall Q2A.

WYSIWYG Question2Answer

The simplest implementation is to copy the from NicEdit front page:

<script src="http://js.nicedit.com/nicEdit-latest.js" type="text/javascript"></script>
<script type="text/javascript">bkLib.onDomLoaded(nicEditors.allTextAreas);</script>

Then paste it into the Question2Answer Admin area. All you do is go to the Layout settings, and paste the above code into the 'Custom HTML in <HEAD> section of every page:' and save the settings.

You should see that all your multi-line text boxes have a WYSIWYG display with edit buttons across the top. The buttons are disabled until you click into the textarea.

Now check that NicEdit works OK on your question, answer and comment boxes. The easiest way is to edit existing items.

This has worked successfully every time I have tried it, but there may be some formatting issues on some browsers. I will cover these in my next article.

WordPress Default WYSIWYG Editor

For most of my sites, I want both WYSIWYG for Question2Answer and for WordPress. I always wrap my Q2A theme inside the WordPress theme, so it makes sense to apply NicEdit to the WordPress header. In this setup, you do not have to also apply it to NicEdit, unless you want different editor configurations in each area.

So to make NicEdit the WordPress Default WYSIWYG Editor and also apply it to Question2Answer, simply post the NicEdit code into header.php within the HEAD tags. This also applies if you just use WordPress without Question2Answer.

Test your comments both at the article level, and (if you use threaded comments) the reply to comment level. NicEdit should work nicely, but there may be issues in some browsers. You really need to try as many browsers as possible, but certainly common ones that your visitors use. See your server logs or analytics program - Google Analytics is very good - to get a list of browsers that your visitors use.

In my next article, I will look at some of the issues that WordPress themes can cause, especially with MSIE. I'll explain how to overcome these issues, and approaches to investigating problems. I will also explain how to avoid the pitfalls associated with simply pasting the NicEdit code from their site. You will see how to create the best WordPress WYSIWYG editor.

You might notice that I do not use the NicEdit/WordPress default WYSIWYG editor that I have described on this site. That is because I intend to move all the interactive features to a separate site, and add more discussion and feedback tools. When I've done that, I will produce a complete step-by-step guide for integrating NicEdit and Question2Answer under a WordPress theme.

Let me know if you want to see it in action before you commit to these changes, and I will show you sites where it works so that you can see the improved front end.

Tags: ,

Simple:Press Forum – Is The Best Good Enough?

May 28th, 2010 by Keith from shrewdies | 1 Comment | Filed in Foundation
Simple:Press Forum is definitely the best forum software I’ve used for WordPress.

There is no WordPress plugin to touch it, and the alternatives are simply too cumbersome to integrate.

For most needs, Simple:Press forum provides all that you need, but I’ve also mentioned before that it is not as simple to administer as some – but only because it has a wealth of options. And under the lid, tweaking the code is not particularly easy – again because there is so much included that it can be hard to find exactly what you want to change.

Mechanics aside, I have been trying for months to develop a simpler alternative built on posts and comments. This is not the most difficult coding challenge, but it is time-consuming, and there always seems something more important to do. Whilst doing the more important things, I noticed that Pods CMS has recently changed there forum for a completely different, simpler interface.

Looking deeper, I saw that it was based on Stack Overflow. Similar, in some ways, to Yahoo Answers, this approach means that we can focus on answering questions. This is a bit of an eye-opener for me, and I realize that promoting a forum to answer questions and share experiences and opinions is asking too much for one application.

I’ve decided to split my forum into a Question And Answer Section and a Discussion Forum. In an ideal world, these would be linked, and it would be absolutely possible to build such a beast with Pods CMS. But the time to build this from scratch means I’d rather look for something usable now, and seek better integration later.

The key here is to find something usable that is easily integrated into WordPress.

Step forward Question2Answer.

I’ve installed it on own of my sites, and I’ll report back on the details later. I’ve no intention to import questions from Simple:Press Forum, as I believe the two applications can work side by side. There will probably be a few more integration issues, but installation of Question2Answer using the WordPress user records was surprisingly easy.

Rather than repeat it here, I’ll refer you to my Question2Answer WordPress installation notes on the author’s support site.

Tags: , ,

wp-config.php Essentials

May 1st, 2010 by Keith from shrewdies | No Comments | Filed in Foundation
wp-config.php is essential to WordPress.

For manual installers, it is set and forget. For automatic installers (SimpleScripts or Fantastico) it is often quite invisible.

Unless something unexpected changes, WordPress 3 adds little different to the way wp-config.php works, so it is still vital to learn a couple of tweaks.

wp-config.php is well documented internally, and the installation instructions tell you what you need to change to make sure that your WordPress installation can see the database.

But, there are two situations that commonly occur in a standard WordPress installation that are far from ideal: memory exhausted messages and excessive page and post revisions.
Read the rest of this entry »

Tags: ,

WordPress 3.0 Beta

April 30th, 2010 by Keith from shrewdies | 7 Comments | Filed in Foundation
WordPress 3.0 Beta is now available, so I used it today on a new website.

I wouldn’t normally use a beta version on a production website, but the full release will be available before that site is fully live, giving me a chance to test some new features.

Site installation continues to be simple, and I took the simplest option of using the automatic script provided by my server host. This has the nice option of changing the default admin username to something less guessable – always a good idea for improved security.

WordPress Settings

Settings are the same as version 2, so I made the usual adjustments: Read the rest of this entry »

Tags: , ,

WordPress Plugin: Promotion Tool

April 2nd, 2010 by Keith from shrewdies | No Comments | Filed in Form, Function
Many of you looking for a WordPress plugin promotion tool have stumbled across my Happiness Today plugin.

You seem disappointed that the next version is where the real promotion potential lies, but the good news is that you do not need to wait.

If you have downloaded and activated Happiness Today, then you already have a tool for displaying random (or selected) promotion messages in your WordPress posts, pages or sidebar.

The main appeal of Pods is the way it makes extending the WordPress database so easy. But stored data is of little use if you cannot present it to your visitors. My first release of Happiness Today was just to prove that, like Hello Dolly does for standard WordPress, it is very easy to build a basic plugin. That basic plugin instantly demonstrates how Pods stores and displays data. In keeping with the Hello Dolly tradition, I displayed random lyrics in the Admin area – but the real life potential was always to be able to produce something simple yet useful, that can display random promotion messages to visitors.

Those promotional features are included in the current release, just not obvious. Here’s how to use Pods inbuilt features to get more from the Happiness Today plugin. Start your marketing campaign now. Read the rest of this entry »

Tags: , , ,

WordPress Pods: Food For Thought

March 18th, 2010 by Keith from shrewdies | No Comments | Filed in Form, Function
The data-presentation link is vital. To get the best out of WordPress Pods, it pays to study the sample that is packaged with the Pods CMS plugin, and the more advanced examples in the Pods Packages directory.

It is also vital to have a clear plan of the presentation outcomes that you need.

When describing the data aspect of my first plugin, I wrote of the importance of thoroughly analyzing the relationship between the presentation of content required, and the structure of data needed to support it. Recently, I saw a question on the Pods Support Forum that seemed to relate to this area. I was particularly interested in it because the issues seemed to be similar to matters I had encountered with my shrewdBar WordPress menu bar plugin.

The difficulty with forum discussions is fully understanding what the issues are. If one is sat with a client, or even on a video link, it is easy to mock up a quick display and discuss what the presentation should actually look like. Difficulties are compounded with cultural and time-zone differences. But, “All is one in their own way,” and the power of the Internet allows the following attempt at understanding the problem and suggesting a solution.

I hope it solves the problem it tries to address, but even if it doesn’t, I’ve learned a neat CSS trick that I’ll be using again.

Basic Pods Data Display

First, create the Pod (Pods – Setup – Pods – Add new pod) using the data supplied.WordPress Pods Table
Second, Read the rest of this entry »

Tags: ,

Pods WordPress Plugins Double Overnight

March 15th, 2010 by Keith from shrewdies | No Comments | Filed in Function
Today, the number of WordPress Pods plugins in the plugin database doubled.

My Happiness Today plugin release joins the Pods UI plugin to double the number of examples of Pods CMS use.

Though this is released as a teaching tool, you should not assume it is perfect. Though it works perfectly, there are a few rough edges in the implementation. But that is the point of Open Source tools – we can improve all aspects of Happiness Today, collectively.

I like the idea of the Hello Dolly plugin as a teaching tool. Though it is criticized for it’s limited usefulness, the WordPress developers have defended it, by rightly explaining:

I think Hello Dolly is a good little example plugin. Users can turn it on, see that it does something, turn it off, see that it doesn’t do it anymore. Plugin functionality exemplified.

This is perfectly true, and useful for novice WordPress users who want to understand what a plugin is, without being intimidated by reams of PHP code. But Pods developers are a different breed. We have varying PHP & HTML skills, but we are bound by a common desire to learn and extend WordPress functionality.

So Happiness Today goes beyond the remit of Hello Dolly, and achieves useful outcomes. Using the simple Pods data edit screens, you can transform Hello Dolly into a client support tool, or promotion tool for any campaign where short messages to WordPress website builders are going to win you a click or three.

Simple Pods WordPress Plugin Output

Simple Pods WordPress Plugin Output

Though I have used plain text in the distributed plugin, the data is stored as rich text, so you can easily include images and hyperlinks in the message display. This is in addition to the included customizable link buttons. After editing the data files with whatever text you need, you can easily import it as a Pods Package for your client sites.

I prepared the plugin in minutes using the Pods Plugin Builder that is the real goal of this project. In fact, most of the time is spent writing the readme.txt file that is generated as part of the plugin distribution package. That tool is still under development, but when available, it will make distribution of your own version of Happiness Today, or any other Pods Package, a very simple process.

Happiness Today Next Steps

Please contribute ideas to the wishlist. Also, if you are a superb PHP programmer, I would love to here your thoughts on code improvement.

I would also like to you to rate the Happiness Today Pods WordPress plugin, but if you cannot give it a 5 star, at least give me the opportunity to fix any problems you have before you vote.

Tags: ,

Simple:Press Forum Advertising

March 14th, 2010 by Keith from shrewdies | 8 Comments | Filed in Fulfil
I mentioned AdSense in passing when I wrote about extending Simple:Press forum by adding code to the descriptions.

Hundreds of you have asked for more information about adding advertising to your forums, or more specifically about adding AdSense to Simple:Press.

I’d like to say “don’t bother!” but I think you deserve more than that.

Why “don’t bother?” Because forums are notoriously hard to monetize, though there are a couple of ways to get reasonable results.

Before I explain those, I’d like to look at some of the ways to add AdSense to Simple:Press forums. I mention AdSense, but of course any advertising scheme can be added in the same way.

Easy Ways To Add AdSense To Simple:Press

❶ Sidebar
It is usually better to disable sidebars on pages, so this option is a poor one. Also Sidebar click-thru rates are usually pretty poor, but this is an easy option – just paste your code into a text widget.
❷ Footer
Edit footer.php in your theme, or add one of the many plugins that let you drop code into your footer.
❸ Other Theme Files
You could edit the page template, or other files, but I cannot see the point.
❹ Forum Page
Simple:Press creates a blank page, usually called forum, though you should normally change this to your-site-topic-forum. You should enter some introductory text on this page, and it is also the best place to easily add AdSense code. If you wrap your text in <div id="sforum"><div class="sfloginstrip"> Your text & AdSense code <\div><\div>, the text will pick up your Simple:Press skin styling. You can also use div to wrap position styling round your AdSense code. If you do this, be sure to test thoroughly on forum lists, forum details, etc to make sure it is positioned OK on every type of forum page.

Harder Ways To Add AdSense To Simple:Press

№𝟙 Enzyme Descriptions
As previously mentioned.
№𝟚 Edit Simple:Press Files
This gives you the most flexibility, but be careful to thoroughly document your amendments, as you will have to reapply them if you upgrade. Also, change the description in sf-control.php to add a link to your documentation, as a reminder on the plugins admin page.

There are lots of options for placing your adverts. Simple:Press has many files, so finding the exact point can occasionally be difficult. However the Simple:Press support forum is second to none, so if you need to know exactly which file to edit for a particular location, ask in their forum. To start you off, I have placed advertising easily just above the statistics block. Simply edit forum/sf-pagecomponents.php, and search for function sf_render_stats(). Paste your code immediately after the { and your advert will appear above the statistics. As the statistics block outputs an HTML table, you have many other options for exactly where you position your code.

Getting AdSense Revenue From Simple:Press

Read the rest of this entry »

Tags: , ,

WordPress Database With Pods Wings

March 11th, 2010 by Keith from shrewdies | No Comments | Filed in Web Hosting
I start my detailed look at the anatomy of our WordPress Pods plugins by showing you how Pods CMS makes the WordPress database fly.

Though we are all working with data at the heart of the WordPress database, we often take it for granted.

But data drives our content, our navigation, our presentation, our whole website.

Wouldn’t it be a good idea if we managed it properly?

I must confess, I love data. Actually, that’s as perverted as loving money – I actually love what can be done with data, rather than data itself. Structured and handled properly, application development, from the most basic WordPress plugin to a full blown web application becomes much more scalable and easier to manage if we get the data right.

WordPress Database With Pods

WordPress Database With Pods (click image for full size)

Our sample project Happiness Today, relies on data, just as it’s inspiration, Hello Dolly does. Whereas Hello Dolly data, the song lyrics, are hard-coded in the plugin, Happiness Today data is put where it belongs – in the WordPress database.

Each Pods project starts with data. This is the basic building block, known simply as a Pod. In complex applications, the hard part is learning how to structure data, especially if it needs to be split into different Pods.

Our example is very simple – every record in the Pod is just a lyric from the song. Experience tells me that I need keys to data in databases. In this case I use a simple line number identifier, which allows me to sort the records should I wish to output the whole song.

It is a good habit to always think of record keys when designing a Pod, or any other database. Pods helps us here by always creating a field called name, which will always uniquely identify records. With the Pod created, we simply need to add the text to each record, which we do with the standard Pods CMS record editing screens.

Job done, except that we need to get the data out. Read the rest of this entry »

Tags: ,

« Older Entries