WordPress Web Hosting » Form

WordPress Default WYSIWYG Editor

Keith from shrewdies — Thu, 26 Aug 2010 10:23:19 +0000

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:

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 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

Keith from shrewdies — Fri, 02 Apr 2010 13:34:21 +0000

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.

WordPress Pods Presentation Features

In the plugin, I present the messages via a Pods template that is called whenever an admin page loads. That template adds formatting to match the admin color scheme, and configurable link buttons. I also present the full set of lyrics on the happiness_today information page using a very simple template that adds nothing but a line break.

Pods output is not restricted to templates that can be as simple or as complex as you need them. Neither is it restricted to Pods pages such as the example mentioned, where you can build a page similar to a WordPress page, but with easy access to your data. You can also include Pods output in regular WordPress posts and pages with a simple shortcode call. Like this:

Think of happiness today
All is one in their own way

That is a simple Pods shortcode wrapped in blockquote tags, but you are only limited by your imagination, and css talents. How about:

Think of the fruitless things we do
Now how about we try a new wave
Don't let our love go away
No one wants sadness to stay

In this second example, I’ve set the limit to two records. Note that records are called randomly, but I have included the chorus several times, so that will appear more frequently – just refresh your browser to see the random effect.

All you need to do is add the following shortcode to your post, page or text widget:

[pods name="happiness_today_text" order="RAND()" limit="1" template="happiness_today_list"]

WordPress Plugin Promotion Tool: Next Steps

All the data in the Happiness Today plugin is easily edited using the Pods data table editing features. In my example, I use couplets from the Think Of Happiness Today lyrics. Though I limit the example text to two lines so that it displays in the admin area properly, you can use any HTML text you like. The Pods WYSIWYG editor allows the usual formatting including hyperlinks, or direct entry of HTML code.

Using Happiness Today for longer visitor messages might make your admin area a little cluttered. No problem – simply deactivate Happiness Today – the data management and presentation features that I have discussed here are all part of standard Pods, and will work fine.

In future versions, I’ll add the ability to import and export different campaign text sets, with other options to make life even easier than it is with the basic release. But you do not need to wait – the current release can be used for any promotion campaign you can think of, including random advertising. In fact, it does not even need to be random, for instance specific records can be called on specific posts. The only limit is your imagination.

WordPress Pods: Food For Thought

Keith from shrewdies — Thu, 18 Mar 2010 11:41:25 +0000

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.
Second, add some test data (Pods – Add {name_of_pod}). We could have used the Pod menu settings to make this title more meaningful, or even used a separate menu out of the Pods hierarchy.
Third, create the Template (Pods – Setup – Templates – Add new template)

^{Happiness Today screenshot note}

Fourth, test the output without any styling using

[pods name="shrewdies_cafe_menu"  template="shrewdies_cafe_menu"]

Fifth, go back to the template, change the list (li) tag to anchor (a – because we need to hover), and add the labels for the prices. Then apply some styling.

The span tags in the template seem redundant up to now, but they are there for a very good reason. The popup display in the “client brief” didn’t seem relevant for the small amount of information to display. Given it’s complexity, I searched for something simpler, and found Eric’s pure css popups. So, adding some CSS styling, our list is transformed into:

Spicy Salver Breakfast Price: $9.99
Lunch Price: $15.99
Dinner Price: $19.99 Golden Gutbuster Breakfast Price: $19.99
Lunch Price: $25.99
Dinner Price: $29.99 Fish Fantasy Breakfast Price: $12.97
Lunch Price: $15.97
Dinner Price: $19.97 Platinum Platter Breakfast Price: $15.99
Lunch Price: $18.99
Dinner Price: $25.75 Bronze Buffet Breakfast Price: $9.99
Lunch Price: $11.99
Dinner Price: $15.99

WordPress Style Notes

The transforming CSS is called by wrapping our Pods call in an appropriate div:

[pods name="shrewdies_cafe_menu"  template="shrewdies_cafe_menu"]

I’ve taken Eric’s CSS style and included it in this post, though in practice, you would probably paste it into your theme’s style sheet. Eric uses his for a menu positioned absolutely near the top left, so I have removed the container styling, and changed the span positioning to relative. I also added the bold line below – a duplicate of the preceding span line, with a greater than to signify anchor text that is a child selector of a span. Without both versions, the span element refuses to hide – I assume this is a conflict with the styling from my theme.

Happiness Today Screenshot Note

Though the two screenshots show the same lyrics from Think Of Happiness Today, do not think that the program has stuck, or in some way does not work. Those lines are the chorus, and I have repeated them in line with the original lyrics. This means that this particular couplet will display more regularly in the display area. If you adapt the plugin for your own promotional purposes, repeat your most important messages, and they will display more frequently.

WordPress Theme Functions

Keith from shrewdies — Sat, 09 Jan 2010 12:10:02 +0000

Functions and options bring flexibility to WordPress themes, but can they also over-complicate?

Flexibility is second only to speed in terms of theme importance.

There are risks when theme functionality goes too far, so you need to know where to draw the line.

Your WordPress theme is the face of your website – your front of house, if you like. Just like the real world, front of house has to present your features and benefits in your best light, and it has to direct visitors efficiently by providing comprehensive, consistent, accessible navigation.

Recent trends are to added customization options, and increase functionality. Feature that used to rely on plugins, especially custom RSS feeds and header/footer code, are now options in many themes.

Disappointed Digression
This Analytics problem highlights why my plea for keeping functionality out of themes is more than me being tetchy. A good Google Analytics plugin would recognize the need to track external links and include the necessary code. I believe at least one does this, but I will review them later. Managing the code is much more than just pasting the basic script into a box, and I believe it should be left out of themes.
If theme authors want to emphasize the importance of Google Analytics (or anything else) they can easily incorporate some Admin warnings without bloating the code for all users.

I was reminded of this today when I checked my Google Analytics, and realized the external tracking code[1] was missing. I always used to add this type of code manually to footer.php. It is very easy to do, but you must remember to change it whenever you change the theme.

To avoid disruption whenever I changed theme, I started using plugins to manage Google Analytics code, and other footer additions. Today, I realized that I can easily go to the theme options for this, and dispense with a plugin. That is tempting, as reducing plugins usually means a faster website. However, I’m not convinced that the theme option is the right place for this.

If I change my theme, I lose functionality. This cannot be right. If it was a WordPress standard, then I might accept that using an out-of-date theme could cause loss of functions. However, there is no standard here, so even if the new theme allows footer code to be added, I still have to remember to copy and paste it to the new theme.

I do wish theme authors would focus on polished presentation and nifty navigation. Give me CSS options and layout options, but please leave the functionality to the plugin authors. Better still, just move your functionality to your own plugin or integrate the features from a popular plugin that performs the same purpose.

WordPress Theme Functions: Next Steps

As we are all stuck with an undisciplined way of adding code to footers, unless WordPress produces a standard, we must ensure that we manage change properly. Footer code is easiest when managed with a plugin. If you want to save a little loading speed, use the theme options or theme editor, but be sure to have a proper change procedure for applying new themes. Such a change procedure covers preparing for and checking all theme dependent functionality, and I will write more on this later.

WordPress Theme Functions: References

1. How to track downloads in Google Analytics automatically [Internet]. [cited 2010 Jan 8]. I have minified this as gatag-min.js if you do not have minifying functionality on your site.

Best WP Theme Service

Keith from shrewdies — Wed, 06 Jan 2010 17:32:48 +0000

I’ve just seen the best WP theme service. I’m grateful and a little awestruck.

For people to donate their time to the WordPress community by developing free themes is one thing. When the theme stands out amongst thousands as truly meeting it’s purpose, that is excellent.

Awesome Aside
Despite the spell checker setting (which is set to American in recognition of the majority of my visitors), I’m a Brit based in the UK. I do not say awesome every other sentence as a habit. When I say awesome, I mean I am awed, overwhelmed and grateful. This is out of the ordinary – and a very pleasing experience.

When the author offers first class customer service – a million miles away from the common “what do you expect when it is free” attitude – that is awesome.

You might wonder why service and support matter – surely, it is the theme performance that is most important? True, a theme must work properly and deliver superb presentation. However, even exceptional themes, if not well supported, soon fall by the wayside. A well supported theme is different – it just gets better and better – as you will soon see.

I’m testing out the Swift theme on this blog. As I mentioned last week, the best WordPress themes are usually the fastest. Swift by name, Swift by nature.

The first impression was good. It is fast, but I have not tested it fully yet. It is flexible, but I have not explored all the options yet – just enough to realize that there are sufficient options to make it possible to avoid the samey look that many themes bring.

“So why are you writing a review when you haven’t finished testing it yet?” I hear you ask.

This is not a review – that will come soon – but the level of customer service that the author offers deserves immediate recognition. So often we see bad support for WP themes (and plugins), and the excuse invariably is that customer support is not justified because the software is free. That is wrong – there is nothing more frustrating than seeing something useful fail because it’s author failed to explain properly how it works.

Contrast that ‘take it or leave it’ attitude with Satish Gandham from SwiftThemes.

First off, I could see from the site that the theme is well supported. These days, if there is no obvious author support, I tend to ignore themes. With WordPress advancing as quickly as it does, it is not worth getting locked into outmoded software. Swift was obviously supported, which is good, but not exceptional.

The exceptional customer support came to my attention this way…

I keep a ‘work-in-progress’ blog to record half-developed ideas (some say they all are ) and progress notes. It saves cluttering up the blog, and sometimes what could be Draft or Private deserves to be seen. I made a note about Swift as part of another topic, mainly as a reminder to do the Swift review once I had finished the current project.

I linked to the Swift site, and Satish soon dropped by to tell me he had a new version of the Swift WP theme available in beta test. OK, it is not remarkable that a busy website owner and theme developer should take the trouble to acknowledge a link, but it is rare enough to be pleasing.

The remarkable came when I checked the link. Not only has Satish made improvements, but he has set up a demo site where you can login and view all the new options. None of the usual “take this beta stuff and see if you can wreck your site with it”. He has taken the trouble to remove all the beta testing risk by providing a demo site. Furthermore, it is not just a meaningless 2 page spread of indecipherable Latin – this has enough content to see how a real site will look.

As you can see, I’m impressed. I’m also very grateful that there are still WordPress contributors who go the extra mile and offer exceptional customer service without charge. Truly, the best WP theme service.

Best WP Theme Service: Next Steps

Do you know other WordPress theme authors that offer exceptional service? Please share the details below. Let’s keep this to format enhancing themes, but if you want to share WP plugin customer service experiences, why not join the discussions in the Functionality Forum (start a new discussion if there is nothing suitable at the moment)

WordPress Hosting Theme

Keith from shrewdies — Sun, 03 Jan 2010 09:47:12 +0000

“Where can I get a good WordPress hosting theme?” asked Fred.

It is a question that crops up time and again. As questions go, it seems straightforward, but you have to wonder why anyone would ask a question like this.

I am assuming that Fred is starting a web business related to WordPress Hosting, and not planning a hobby site to explore and discuss the finer points of WordPress Hosting themes. In that case, we have yet another example of failure to build the foundations of a web business.

It is no use simply deciding to set up a WordPress Hosting business without being clear about the purpose and objectives of that business. People familiar with my PROSPRA method know that WordPress hosting is not a suitable purpose. Brief examples of suitable purpose are “to advise students about finding WordPress hosts that will help their research and presentation” or “to supply a website hosting service that provides new website owners with a ready-to-run WordPress site”.

Those purpose statements would be longer in the real world, but the point is they are specific to the type of customer you are seeking. Fred’s question gives us no clue about his target customer base – a common situation implying he has not defined it. If you do not define your target, then how do you find it?

It may well be, for technical guys, concerned with installing and configuring server software, that you have no part to play in defining the purpose of the web business. That is fine, but you must get your client or boss to explain the purpose in clear terms. You cannot be expected to install or design an appropriate theme if you are unsure about it’s purpose.

Wrong Way To WordPress Hosting Theme

WordPress Hosting Search.
Just type themes in this box.
There is no need to type WordPress Hosting.

Search for one, and you will find sites that list any number of generic WordPress themes, made to look like the ideal hosting theme by the addition of pictures of servers.

Follow this route, and you have a generic looking site offering a generic service. You compete directly with thousands of others, and your theme will never be memorable.

How To Choose A WordPress Hosting Theme

Accept that if you want to cover your site with pictures of servers, it is extremely easy to amend any theme to do that. So, you can start with any theme, and you need to think what other properties are important. I suggest that speed is the most important issue for a hosting business. Better still, if your purpose is to aim at a specific section of the market, you can differentiate yourself with a theme that appeals to photographers or students, or…

If you are hosting several WordPress sites, or if you will be helping clients configure their own sites, it is good to use a theme with comprehensive customization options.

Install a good, fast, flexible theme and adapt it to your needs. You will get better results than by installing a generic WordPress hosting theme.

WordPress Hosting Theme: Next Steps

You’ve seen how important purpose and objectives are, so if these are not clear, your next step is to apply some PROSPRA techniques.

If you need more help with themes, look at related articles in the Form Section, or ask your questions below.

WordPress Design Tool

Keith from shrewdies — Tue, 08 Dec 2009 20:59:21 +0000

The most essential WordPress design tool is not part of WordPress – it’s an image editing program called GIMP.

I use it every day, so I’ll take this opportunity to describe why it is essential during all the phases of managing your WordPress website (and all other websites unless you’ve got an unhealthy textual obsession).

freeche Web Traffic Logo

The prompt to write this today came from using GIMP to help me prepare to launch a new site. Very few WordPress themes comes complete with images that are perfect for your site. In any case, you really need a unique logo to emphasize your unique purpose.

I’ll explain the reasons for creating images for your website. Then I’ll do a quick run through of the GIMP features I used to create the image you see here. This is not a GIMP tutorial – there are plenty of those available on the Internet – but it gives you an overview of the process, and lets you see how easy it is.

WordPress Design Image Requirements

In addition to your logo, there are also WordPress design considerations with other aspects of your theme. Many themes use background images to enhance certain features and functionality.

Last, but not least, you need images to decorate your posts and pages. Images are indexed by search engines, and are another way to attract web traffic. Equally importantly, they add interest for your visitors, and encourage people to return to your site.

Useful Image Editing Features

Image Sources

GIMP Screenshot Morguefile

You can take your own photographs, but there are also many sources of free and cheap images on the Internet. One good source is morgueFile pictured on the right, but the one I use most is Flickr.

As you see from the image on the right, GIMP allows easy screenshots (a window or full screen), and images are easy to crop to size.

Heavy Traffic at Buenos Aires (pano)

For my logo image I started by copying the image on the left from Flickr (click it to see the original). GIMP makes it easy to either copy and paste the starting image, or save the image on your local storage, and edit from there.

Please be sure to check the copyright restrictions. If you want to go beyond the published copyright (e.g. you might want to edit an original when no derivative works are permitted), contact the owner with your plans – you will usually get a positive response, but if not, there are millions of other images that you can use.

I’m indebted to lrargerich for the traffic picture. He shares his images with anyone prepared to share his accreditation. He has some very special images on Flickr, and some amazing photographs and explanations on his website.

In my composite picture, I wanted to focus on the traffic element whilst retaining some of the background. I used GIMP to crop a strip from the photograph that suited my purpose.

Image Manipulation

Not only is GIMP an amazingly full featured image editing program, it is also Open Source, and there are many add-ons for it.

Pan to Bow

One such add on is Pan to Bow (click the image for more details) from another Flickr contributor – theilr. Using this filter is simplicity itself. Make sure that you Select – None, then choose Pan to Bow from the bottom of the Filters list. Select the angle that you want to rotate your panorama – that’s it. A traffic panorama transformed into a traffic rainbow (or arch).

To add the text, I chose the Neon Logo tool, which creates a separate image. I created three logo pictures for the 3 lines of text, pasted them into my traffic rainbow and scaled them to fit.

WordPress Design Tool Next Steps

Now you know how to find images, or create your own, and manipulate and merge them, try some examples for yourself. If you get stuck, just ask for help in the design forum.