Continuing the back to basics series, let’s take a look at the WordPress Theme.

There are thousands to choose from, but you will never find one that does everything you want. Eventually, you will want to tweak it, or pay someone to tweak it for you, but you need to start with something just to get your website started.

A website is not a website until you have at least 60 pages. Once there, you can start to worry about the look and feel in detail, but to start with, you just need something that does not get in the way. There are many themes that have lots of extra functionality added. This seems wrong to me, as it locks functionality to look and feel. If you are an expert PHP coder, this probably doesn’t matter too much. If you are not, stick to something basic.

Read why you need to make your WordPress hosting responsive

Do you ever have those days when you are annoyed with yourself, but cannot quite work out why?

I just realized I was getting annoyed with a client for being picky about website layout, when I wanted to get on with traffic building. With that traffic-generating project on hold until we can arrange a theme review, I returned to expanding my own website empire.

With several half-finished schemes and plans, I found myself hopping from website to website, but never achieving anything. Then it hit me.

Read why getting back to basics is essential for successful WordPress Web Hosting

There are many tips on Shrewdies for making the most of Simple:Press. I’ve saved the best until last – leave it.

If you use it, switch to Question2Answer. If you are contemplating using it, contemplate Question2Answer. It is better, faster, and much easier to integrate with WordPress, despite being a standalone system.

I got a compliment from one of the Simple:Press founders – Wow! what a busy forum!

Not this site of course, but I have success elsewhere on the net, and I needed forum support. Simple:Press was broken, and upsetting some of my thousands of daily visitors. I tried to get support, but now you have to pay for it. Don’t get me wrong – people who give good support deserve to get paid. But if a piece of software is broken, you should not have to pay to get it fixed.

Continue to read how to deal with the legacy of Simple:Press forum software for WordPress

One victim of my current project to build my own theme & plugin replacement is the shrewdBar menu. If you are quick, you will still see it at the top of the screen, and if I remember, I will save an example for posterity before I replace it.

I found it to be the best, most flexible, way to build a dynamic navigation structure. I need dynamic navigation to adjust the menu to reflect the changing importance of different pages. More importantly, I need it to present a customized navigation menu for each user.

I experimented with other formats, but nothing was as easy to use, and as easy to recognize as a strip of buttons across the top of the page. WordPress also saw how good this was, and continued to evolve the Admin Menu Bar. I felt this was too good to keep for administrators, and resolved to replace my shrewdBar with the WordPress Admin bar, enhanced by functions to add and remove menu items based on the visitor, and my page priority process.

This is very easy to do, and there are hundreds of websites with articles about amending the Admin bar. The codex page on the add_menu() function is quite clear, and so you probably do not need to read articles about it. In any case, it is deprecated from WordPress version 3.3, to be replaced with the add_node(), and Admin bar is now called Toolbar.

There is additional functionality in add_node() compared to add_menu(), but the function calls for my menu manipulation work just the same, so all you need to change in any example code is to replace add_menu with add_node. Then everything works OK, except it doesn’t.
See why Toolbars break, and how to fix them

Since my last post here, my personal health has deteriorated, and my website health has suffered as a result.

A few days after my last post, a fall resulted in a broken back, a broken skull, a broken knee, and broken dreams. But 2012 is the year to set all that aside. A time to fix the health of this website, and improve the health of all my visitors.

In a new project, I am working on bringing health freedom to people, their businesses, and their networks. I will share more of that with you as that develops, but since this website is here to support everyone who is responsible for building and operating websites, let me focus on website health here today.

There is a lot of confusing information about the way to test the health of your website. Various technical experts offer different views on the importance of many aspects of page structure. Various marketeers offer different views on the importance of many aspects of search engine optimization. Various online checkers have different methods for analyzing your page health. It is very easy to lose focus. We spend more time monitoring, analyzing, and improving, but that distracts us from the important job of delivering an easy-to-navigate website to as many people as possible.
Continue to learn of a tool that checks your website health

In today’s page about installing WordPress, I’ve mentioned some essential tools. I’ve selected Google versions since they are free, effective, and easy to implement.

As I mentioned, these tools are so easy to use, they do not really merit step-by-step instructions, though I will do this for some of the reporting features that I use elsewhere. The tools are important, as they give you management tools (covered at Shrewdies Web Business Management), and technical development tools covered throughout this site.

Of course, you may prefer tools from other companies, and I’m always happy to discuss the comparison, or help with other tools. Just use the forum to discuss alternatives, or ask for help.

The essential tools I cover here are Google Analytics, and Google Webmaster Tools.

Analytics gives you vital information about how traffic arrives at your site, where it comes from, and what happens to your visitors once they arrive at your site. Though much of this is for management use, technicians will find some of the information crucial for making decisions about navigation. Note that Analytics cannot be used on WordPress.com sites, which do have some free site usage statistics, but none that will help you monitor navigation paths.

Webmaster Tools gives you a wide range of information about site performance and interaction with the rest of the Internet. Though some of this is vital for management use, most of it is crucial to technicians to determine and fix weaknesses, and to make the most of your strengths.

The implementation screens for both these services are very simple, so I will not spend much time explaining them. There is plenty of flexibility about the way you enable them, and I will present what I believe is the optimum sequence.

Google Analytics

It pays to start with Analytics, as Google will use that account to verify Webmaster Tools later (though there are several other options). Once your Google account is open, you need to add a new Profile in Google Analytics, and you need to choose the option for a new domain.

Your first question, after entering your website domain address, is to choose a time zone. As all information is summarized by day (and other time intervals), you need to choose something that suits you best. This is normally your local time zone, but if your market is predominately located elsewhere, then it might help to chose that location. Ideally, you would choose the same timezone as your webserver location, but this is not critical. I find that, once in use, most of your time is spent comparing current time periods with historical positions to see if you are improving, so it doesn’t particularly matter where each day starts. If you plan to use AdSense or AdWords on the same website, then it really does help to have consistent timezones, but it will not harm you if you do not.

Note that the Country selector is a little strange – common countries are listed at the top, followed by less populous countries.

After entering your timezone, the next screen gives some code to add to your website.

The simplest way to add this to your website is to copy the code, and add it to the footer.php file in your theme (Admin – Appearance – Editor – footer.php). This has drawbacks because it means you have to repeat this edit if you change your theme, and you cannot easily use advance features without adding your own PHP or JavaScript code.

The better way is to use a WordPress Plugin to add Analytics code to your site simply by setting your profile Web Property ID, and other optional choices. I’m currently testing three plugins on various websites, and will report back on them in due course. In the meantime, you can discuss your own plugin choice or experiences in the Hosting forum.

Once your plugin options have been set, and your site starts generating traffic, and this will be monitored by Google Analytics. Remember, if you have set options not to track your own visits, you will not generate any Analytics data until you, or somebody else, visits the site without being logged in. There will be a few minutes delay between your first visit, and the Analytics screen reporting you as verified. As ever, if you have problems, please use the hosting forum.

Google Webmaster Tools

On your self-hosted WordPress.org website, enabling Google Webmaster Tools is as simple as adding the site URL, and choosing the “Link to your Google Analytics account” option. (Update: for this to work, it requires Asynchronous Analytics code in your page header. Not all plugins do this, as you will see in my forthcoming review, so probably best to choose one of the other options – I prefer uploading a file. I will do a further in-depth report on Webmaster Tools soon)

If you have a free WordPress.com site you can enable WebMaster Tools by choosing the “Add a meta tag to your site’s home page” option. This will reveal a meta tag, and you need to highlight the content part of that tag – excluding the quotes. Paste this into the Tools (Admin – Tools) box labeled “Google Webmaster Tools” and save your changes.

For both these options, you click the Verify button next, and Google will report your site as verified, though you might have to wait a few minutes.

Though neither of these tools will provide much value until you publish some pages, you will soon find the data, especially from Webmaster Tools, to be indispensable. Please discuss your experiences with these tools, and any other similar services, on the hosting forum.

Despite the lack of activity here and on shrewdies.com, I am still open for business.

In fact, business is booming, so I just do not have time to develop these web business help sites.

If you are desperate for help, I’m still around, so I can soon answer questions – I just can’t get involved in more projects at the moment. I am moving support to shrewdies.org, and I’ll be closing the commenting features here during 2012.

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.

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. Find (Ctrl-F) qa_html, and you should see lines similar to those below. They change $html, but we want it to stay as entered. 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.

Q2A Update

I no longer support or recommend Simple:Press. Please search here for Question2Answer if you want a forum for your hosted WordPress website.


Simple:Press Forum is definitely [edit: no longer] 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.