Category Archives: Form

Themes, templates and all aspects of formatting your WordPress web business content

WordPress Theme Change: Style Element Gotchas Screenshot

How to Change WordPress Theme Styling

I have given an overview of why to use child themes for your WordPress website, and now I will cover more detail about changing styling.

WordPress Theme Styling: Warning To Creative People

If you are artistic and creative, you are probably interested, more than most, in getting your WordPress theme looking just right.

Be careful before you commit yourself to changing CSS. It is the equivalent of telling your paint which color it should be, or your notes what frequency they should vibrate. It is technical. Some changes are quite easy, but do not let that simplicity fool you. When you tamper with an established WordPress theme, you are changing the way it was designed to look. Minor tweaks will not hurt, but what seems minor to you, such as moving the position of an element can impact on the whole structure of the page. I have seen grown designers cry when they swap brush and canvas for keypad and CSS stylesheet. One who thought he had avoided breakdown fell on his sword when he realized his efforts looked terrible in a different browser. Shrewdies are happy to help you fix your broken CSS – we are also happy to take your orders, and a little cash, and fix it for you.

Change WordPress Theme Styling: Preparation

First make sure you are using Firefox, Chrome, or better still – both. Once you have attracted some traffic, your Analytics software will tell you which other browsers you need to check your website with. However, for development, you need Chrome, and Firefox with the Firebug and FireFTP add-ons.

  1. Install One-Click Child Theme plugin
  2. Install your chosen theme
  3. Create a child theme

You also need to prepare your child theme from my explanation in the previous article about choosing your WordPress Theme (summary on the right). There are other ways to do this, so if you want to search the WordPress documentation for Child themes, that is fine.

Either way, once your site is running a child theme that is properly configured with links to the parent theme then you are ready to go.

See how to change the right CSS in your WordPress theme

Table of contents graphic

TOC Even When No Content

Table Of Contents

Introducing In-Page Table Of Contents (TOC)

Creating a good Table Of Contents (TOC) is vital to any website that needs long reference pages. I will show you how to make long pages easier to navigate for your visitors. This is vital for good visitor experience, but it also helps search engines understand your page, because a TOC has to have structure.

Before I go on to describe the structure and advantages of a TOC, I should stress that the following techniques apply to all websites, not just WordPress.

See how TOC improves visitor experience and search engine performance

Never Edit Your WordPress Theme

Editing WordPress themes is dangerous. You won’t kill yourself, but you might kill your website. So how do you get your website formatted the way you want? You could do it the shrewd way, but here is how to format your website the Shrewdies Way.

You have 2 choices: create your own WP Theme, or modify someone an existing one.

The third option of using an existing theme untouched rarely works. Besides which, it makes for very boring articles. Appearance – Theme – Install Themes. That’s it.

That is also the starting point when you want to modify an existing WordPress theme, but first let me discuss creating your own.

See how to edit WP themes shrewdly

WordPress Default WYSIWYG Editor

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('/rn?/', "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.

WordPress Plugin: Promotion Tool

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. Continue reading

WordPress Pods: Food For Thought

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, Continue reading

Simple:Press Forum Enhancements

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.


The Simple:Press forum plugin is one of the most comprehensive and customisable plugins available for WordPress.

Is that enough for me?

Oh, no! I have to push just that little bit further.

It started some time ago, when I wanted to include a hyperlink in a forum description. I was pleasantly surprised to see that the HTML held up fine in the forum, and links, bold text and other markups were easy to add.

I was less happy when I went back to the Admin pages to make other changes – the HTML screwed up the Admin display, and could not be edited. However, it could easily be re-typed, or edited directly in the database through phpMyAdmin, so, I left things as they were. For a while.

I was tempted to raise this with the support guys at Simple:Press. They have always been extremely responsive, and their own forum is a fine example of the best in technical support. However, a new version was in the late stages of the release process, so I thought I would wait until after it’s release.

A few days later, I had the bright idea of including some AdSense in the description. I was certain that the Simple:Press forum description was no match for the AdSense javascript code. However, I remembered how I had used the Enzymes plugin in the past to make adding AdSense code to posts very easy.

WordPress Enzymes Plugin

As good as Enzymes is, I find I can do the same things and more with the Pods CMS plugin. See the WordPress Pods Blog for more.

This is a fascinating plugin that allows so many ways of manipulating your content that it deserves (and probably needs) a series of articles to do it justice.

In it’s very simple form, it allows you to store data in standard WordPress Custom Fields and refer to them wherever you want.

I’ll cover Enzymes in more detail later. For the forum description, all you need to do is to store the HTML for your description in a Custom Field, and it is easy to display, and easy to edit.

Simple:Press Forum Description Enhancement

Continue reading