PHP | Miklas Njor

How to add collapsible comment form to your wordpress blog

Works in: firefox, safari, chrome.

Possible conflicts:
Problem with WP Ajaxify Comments, which makes the page jump to the top. It also updates the top first post, which might only be a problem if you use the Auto Load Next Post plugin.

Set up

Abstract: Users expect to be able to comment on your blog posts, however, very few users choose to actually do so. The comment box takes up a lot of space. Removing the comment box is out of the question, because you want people to be able to comment. This creates a gap between expected usability and functionality, and your website’s design. Comment boxes take up a lot of screen real estate, since users need to fill in at least three fields: their name, email address and the comment itself. On top of that, there is the submit button and perhaps checkboxes for also subscribing to the blog, new comments, and perhaps even buttons to use some API’s to login via social accounts. So the comment area needs to be there just in case, but still not be in the way. This is good information architecture…

Jetpack has a nice workaround to this problem, where the box expands and buttons come into view once the user clicks inside the comment field. This is great usability, but I couldn’t get this feature to work as expected on my blog. No matter what I did (CHMOD’ing files, changing .htaccess, deactivating plugins), I would get an error once a comment was submitted that said: “You don’t have permission to access /wp-comments-post.php”.

A second problem was, that I use the Auto Load Next Post plugin to create an infinite scroll of related posts. If the comment box takes up too much space, it is difficult for the user to figure out, that new posts are featured under the post that they are reading.

A possible workaround could be to print to the screen that new posts have been loaded below, but constantly showing a message would eventually drive users nuts, and then you would have to write a script that keeps track of how many times this modal screen had appeared infront of the user, and set a cut off point, perhaps add this to a cookie for when users came back to the site. Yada-yada. The list goes on…

So I decided to just add a simple javascript toggle on/off button to open and close the collapsable element, letting users who wish to comment on my blog, be able to do so, and the 99% percent who don’t comment, aren’t bothered by the large comment box.

Tools you need:

For editing files you need notepad if you are on Windozs; or text-edit if you are on a Mac. If you are on Linux, you hopefully know what to do, right (because I don’t!). Some other decent IDE’s (fancy name for code editors) are TextWrangler, TextMate or Komodo Edit. You also need a program to transfer the files to and from your server. FileZilla comes to mind, or Transmit.

Files you need:

  • comments.php (in your theme’s folder – use your file transfer program to fetch it)
  • functions.php (in your theme’s folder – use your file transfer program to fetch it)
  • header.php (in your theme’s folder – use your file transfer program to fetch it)
  • style.css (in your theme’s folder – use your file transfer program to fetch it)
  • js.js (this file you will create and upload to you theme folder via the file transfer program)

A note about functions.php
When you update your theme, it overwrites (deletes) every file and subsequently any customisation you have made. This is slightly problematic… If you (perhaps correctly so) feel that you shouldn’t edit your theme’s functions.php file, you can either create a child theme based off your current theme and add the functions.php, style.css and js.js to the child theme folder, or you can create what is know as a Must Use plugin. It sounds more scary than it is. There are many places to read about how to create both, see references below. Another way around this is to create a file called “myNotes.html” or similar, and add it to your top folder (don’t store passwords) but use it to keep notes about things you added to your site, or install the Note Press plugin to keep notes on your site in the admin area. This is also good if you are many people running the site.

Ok, enough talk already, lets get to it.

Creating the collapsible javascript comment form for WordPress

Step 1 (comment_form())

First off, you need to make sure that you use comment_form() in your theme. You can check this in your comments.php file in your theme’s folder. The statement will look something like this
<?php comment_form(); ?>.
If you don’t see comment_form() anywhere in you comments.php file, check other files called comments something, or try to email the theme developer. As a last resource, you might want to change themes, as this is an indication of a theme that doesn’t follow current standards, and as such might have other problems.
The reason you need to make sure that your theme uses comment_form(), is that we are going to write some code that modifies it, so if it’s not there, we can’t modify it.

Step 2 (create javascript file)

Create a file called “js.js” (.js stands for javascript). You can name your javascript file anything, but just make sure, that if you name it “jeronimo”, that the file has “.js” appended as a prefix to it, so browsers know that it is a javascript file.

Step 3 (write javascript)

in your js.js file (or whatever you called it) add the following code:

Save the file and upload it to the theme folder.

This shouldn’t clash with the other functionality of your site, or with other jQuery features which many WordPress sites use. I had some trouble getting jQuery to play nice while creating this collapsible comment box, therefore the functionality is written in plain javascript. The code is from CSS Tricks.

Step 4 (add link to javascript file)

Open up your header.php and link to your javascript file. If you are unsure how to link to it from the header here is the way I do it:

this is added in the header.php in the

section just above

and make sure it is not between any

tags.

Save and upload the file to your theme folder.

Step 5 (functions.php)

Open your functions.php from your theme’s folder. If you don’t have a file called functions.php (very unlikely), create a new file and name it functions.php and add an opening and closing PHP statement as so:

Just above the closing ?> at the bottom of the file (functions.php), you add the following code. I have added comments denoted by // to explain what is going on.

Save and upload the file.

Step 6 (CSS)

If you want to go all artsy fartsy, you can add the following to your style.css

that way people can see that the button has some sort of function…

References

The javascript code:
https://css-tricks.com/snippets/javascript/showhide-element/

If you want to add the button somewhere else, you have a few options, however the setup is slightly different and you will have to find information elsewhere:
http://codex.wordpress.org/Function_Reference/comment_form
http://justintadlock.com/archives/2010/07/21/using-the-wordpress-comment-form

How to create must use (MU) plugins:
From Justin Tadlock (a very good explanation):
http://justintadlock.com/archives/2011/02/02/creating-a-custom-functions-plugin-for-end-users
From the WordPress Codex: (just scrapes the surface):
http://codex.wordpress.org/Must_Use_Plugins

Child themes
http://code.tutsplus.com/tutorials/child-themes-basics-and-creating-child-themes-in-wordpress–wp-27475
http://codex.wordpress.org/Child_Themes

Jetpack related posts and qTranslate-X fix

Problem:
I had some trouble getting Jetpack’s Related Posts to play nice with qTranslate-X. The issue I had, was that Jetpacks Related Posts did not translate the post’s headlines and link title tags, and since this site is mulitlingual and most of the articles are both in Danish and English, this is a big problem.

 Obviously with the many settings in the WordPress eco system, the fault could lie elsewhere, however a lot of switching off of plugins and settings, clearing caches and looking under the hood etc., led me to believe, that the fault is with Jetpack. The fix is pretty simple, except it will be overridden next time I update the plugin, so I have notified the developers of Jetpack.

In line 3, in the code snippet below, the original code is

which means that the posts title is returned to the system and stripped of all HTML tags (syntax). The title is however not internationalised, in the sense that the system doesn’t account for any translations of the post title string.

The solution
The solution is to add __() around the $post_title so the line becomes

The place to make changes is: wp-content/plugins/jetpack/modules/related-posts/jetpack-related-posts.php on line 697 (in version: 20150408 of the plugin)

{ IPTC:Headline | }

A look at two CMS – SilverStripe and Joomla

 Joomla vs silverstripe CMS

SilverStripe: Easy to get a site up and running with a minimum of fuss. Easy to edit content. Changes to menus and navigation is limited, but would work well for minor sites. For larger sites a web developer would have to be hired.
Joomla: very easy to setup and tweek. Most users would find the basic features easy to use. For more advanced features a web developer should be hired.

SilverStripe vs. Joomla

Here is a look at SilverStripe and Joomla.

Target audiences

  SilverStripe Joomla
Target group Beginners and experienced web designers Beginners and experienced web designers
Usage Mostly small-size websites Small and large websites
Typical users Professional and personal http://www.silverstripe.org/comm unity-showcase/ Professional and personal sites. http://community.joomla.org/showcase/

Cost of Operation


  SilverStripe Joomla
CMS Free (Open Source) Free (Open Source)
Themes Unknown Free and Commercial
Modules/Plugins/ Add ons Few but free add ons/modules/themes  

System Requirements & Hosting Environment?

Apache, MySQL and PHP SilverStripe Joomla
Linux AMP Yes Yes
Windows AMP Yes Yes
Mac AMP Yes Yes
X AMP Unknown Yes – but not for live sites
  http://www.silverstripe.org/system-requirements/ http://www.joomla.org/technical-requirements.html

Documentation of SilverStripe and Joomla

SilverStripe Joomla
Pretty straightforward installation. Kind of like WordPress “Famous Five Minute Install”.
Also lots of documentation on http://doc.silverstripe.org – A few dead links
Yes. Plenty on the Joomla site. It is set up as a wiki. There is also a forum.

Content publishing and workflow

  SilverStripe Joomla
How is content published Through a standard WYSIWYG editor. Pages are easily created and can be moved around in the site-tree by drag and drop. Through a standard WYSIWYG editor. Although there is (to me) some confusion as to where content gets placed. There are so many features in Joomla that production of content is almost drowned out.
Workflow Very straightforward workflow with logical constraints. Feels like a steep learning curve because of the many options and supposedly necessary steps before content can be published..

The SilverStripe Navigation/Site-tree

The SilverStripe Navigation/Site-tree.

Publishing Areas of SiverStripe and Joomla

SilverStripe Publishing area

SilverStripe Publishing area.

Joomla publishing area

Joomla publishing area.

User roles and rights

  SilverStripe Joomla
User Roles Admin can create unlimited groups and roles Ten levels from SuperUser to Public. New groups and user levels can be created.
User Rights On/off switches for admin section, modules admin, site content, role management. Very granular permission system. Each user is supplied with a role that matches his function. e.i. editor, author, registered user, Shop owner.

Public Theme vs. Admin Theme

SilverStripe Joomla
Public and admin theme design is very basic out of the box, but the public theme can be modified. Public theme is very advanced out of the box. It can be modified. Admin theme seems very cluttered and but could be a matter of getting used too.

Content: SilverStripe and Joomla

Organisation of content in SilverStripe and Joomla

SilverStripe Joomla
A curious feature of SilverStripe is how it deals with nested pages. A sub-page of a page is added to a sidebar on the “top” page. It is in many ways logical to forcefully add local navigation for the user, although it would be nice with an option to include it in a dropdown of the main navigation. If a page is a “top”-page it will be featured in the main menu unless unchecked. It uses automatically generated, but editable, pretty- permalinks. Joomla gives the content creator great control over how to structure the site’s content. Either by categories or by ordering of the prioritised order (set by user), publishing date, language, hits and who created the content.
Menus can be authored to a very granular level.

How do SilverStripe and Joomla handle images, text and video?

  SilverStripe Joomla
Text WYSIWYG editor only WYSIWYG editor with the option to turn it off. Different levels of sanitising content depending on user role.
Image Media library where you can upload images (one at a time). When you click to insert images in a page, images from the library appear alongside the option to upload images. Images can be upload to a media library
Video Could not get it to work Could not get it to work

Search

SilverStripe Joomla
Silverstripe has something called search in the admin area, but I was unable to insert a search box on the site. Joomla searches text, titles and metadata if there is any. There is automatically a search box inserted on the standard theme.

How is the presentation layer controlled?

SilverStripe Joomla
SilverStripes templates can be transformed to your hearts content. The template syntax is a string process language. See illustration below. Template Design in Joomla is a mix of PHP, XML, HTML templates and tweeks to modules in the admin section. It comes of as being overly complicated.

SilverStripes template syntax

SilverStripes template syntax.

SilverStripe vs. Joomla

What is each CMS good at?

SilverStripe Joomla
SilverStripe is ideal for websites that need to built very fast and don’t need updating too often. Although it has a framwork feel to it, like Drupal, it feels like Drupal without the huff and puff. I’d imagine that if the content is of static nature, many of the sites being built using WordPress or Drupal could be made using SilverStripe. Joomla makes for good use regarding small or big websites. The main focus seems to be on larger sites that need lots of functions and it would perhaps be overkill to use Joomla for smaller- sized sites with static content. The possibilities seem endless.

Aimed at beginners or experts?

  SilverStripe Joomla
Beginners Yes Yes
Experts Yes Yes

System User Interface

SilverStripe Joomla
Pretty basic and crude design of the admin area, but it works and is easy to navigate. Many options of which almost all can be reached via the top menu in the admin section. As pointed out before, Joomla can be finetuned, but it is not always clear what functions do and where they are controlled.

Do SilverStripe and Joomla do what is says on the box?

SilverStripe Joomla
Easy to get a site up and running with a minimum of fuss. Easy to edit content. Changes to menus and navigation is limited, but would work well for minor sites. For larger sites a web developer would have to be hired. I installed the CMS via Joomla’s cloudservice which allows for 30 days free hosting with the option to export the setup and go elsewhere afterwards, or stay on and pay a hosting fee.
It seems very easy to setup and tweek and I’m sure most users would find the basic features easy to use. For more advanced features a web developer should be hired.