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


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…


The javascript code:

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:

How to create must use (MU) plugins:
From Justin Tadlock (a very good explanation):
From the WordPress Codex: (just scrapes the surface):

Child themes

Jetpack related posts and qTranslate-X fix

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


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.


How to invite friends to your facebook page

Problem: Inviting your friends to ‘like’ your facebook page.


Log in to your facebook page.

Click Suggest to friends

and now you get to select people. BUT… you can’t choose people with a kind of grayed out profile image. There can be several reasons for this. Maybe they already have liked your page or perhaps they have settings that prevent others from inviting them to like pages.

Those with a green circle can be invited. Those with red cannot.

N.B. I have blurred the names.

{ IPTC:Headline | }

Photoshelters sucky hotlinking prevention

This is neither a WordPress or Facebook fault but purely a very clumsy solution implemented by Photoshelter. In your Photoshelter admin you can choose a “security” precaution preventing people from hotlinking your images. “That’s a great feature!” I hear you say. Well. Yes and no. The idea is great and technicly old hat. Been around for a long time. But the way Photoshelter uses it sucks.

When someone hotlinks your images they use your image on their site. Often without permission and they also steal your bandwidth. To prevent this you can create a mod_rewrite.

How mod_rewrite works

Here is a simplified idea of how a mod_rewrite works: If our-website.com asks for a file hosted on our-website.com’s filesystem please go ahead and serve that file to the end user, but if not-our-website.com (or any other website) asks for a file belonging to our file system (our-website.com) please don’t serve that file.

On top of this you can make a set of conditions. If our-website.com or facebook.com or myspace.com or blogger.com or mydadswebsite.com ask for a file show it. Else don’t show anything.

The problem is Photoshelter

Photoshelter won’t let you set these parameters nor have they made their own safelist of the most common websites where users share photos. It takes only a few minutes of coding to solve it and I can not for the life of me understand that a large web-corporation has chosen the suckiest solution.

[bctt tweet=”How can a large web-corporation chose the suckiest solution. #photoshelter “]

Another solution could be to make to folders. One closed off with a mod_rewrite and one open. The closed one stores the large images and the open folder stores a smaller version for social media sites.

The solution

But for now the only solution is to turn off the “feature” at Photoshelter.

You can read more about hotlinking and mod_rewrite at:




Pretty permalinks on a windows hosted site

It took me a while to figure out why her site wouldn’t create propper pretty permalinks. But then I realised that her site is hosted on a windoze server.

I found the answer here: http://codex.wordpress.org/Using_Permalinks#Permalinks_without_mod_rewrite

Before even thinking of changing the permelink structure I installed a plugin which is on my own top ten list. Redirection. It is a very powerfull plugin which can “move” your pages and create all sort of 301 and 310’s but it will also work nicely as a set it and forget it plugin.

The reason I install it is to catch any incoming links to Tine’s old pages. When http://blog.fotoco.dk/blog/?p=73 is changed to http://blog.fotoco.dk/blog/title-of-page then http://blog.fotoco.dk/blog/?p=73 will no longer excist. Both readers following the link and google aren’t too happy about that.

This is where Redirection has it’s force. If I check the correct boxes it will automagicly create the redirection for me. Easy, saves time and no need to fiddle with the .htaccess file.

How to install Redirection

Install via WordPress admin og go to Redirection’s own page at WordPress and get the .zip file.

Once installed go to Tools -> Redirection

Go to Redirection -> Options

and check the box “Monitor new posts” in the URL monitoring section (and choose Modified posts if it isn’t already choosen.)

Alright. Back to changing that permalink structure without old pages dying on us.



How to Pimp your Facebook Fanbox Facepile and Pagestream

Here is a tutorial on how to use CSS to style your Facebook fanbox (facepile/likebox) and pagestream.

Below the large image further down you will find a detailed description of how I rolled my own css blend to integrate Facebook with my site without loosing my overall graphical identity. Tested in Safari and Firefox.

Facebook ships its social plugins with their own css. This gives a uniform look to all of Facebooks widgets and tells a users that they are interacting with Facebook.

Keep that in mind when you dress up you box so your readers feel “safe”.

I will be covering how to “install” your own css to override the facebook-style and how to style most of the elements inside the box.

Customizing facebooks custom css

If you use the wordpress plugin Simple Facebook Connect you enter your CSS code via SFC’s admin page. There is a big box called “Fanbox Custom CSS”.

On the other hand if you use a stand alone social plugin picked up from the Facebook site here is an explanation of the code. You could of course just link to your site’s css file but since facebook uses it’s own style names a better choice is to create your own and save it on your site. Perhaps in your themefolder for easier maintenance.


If you are using the XFBML version you can insert a direct link (http://example.com/facestylesheet.css) to your css anywhere before


Here is an example:

If you use wordpress and save the css file to your themefolder you can write:

css="<?php get_bloginfo('stylesheet_directory'):?>/facestylesheet.css?1"

notice the ?1. That refers to the cached version of your stylesheet. It is important to change the number in the XFBML code every time you make changes (and not include ?1 in the css filename, mmmmkay) so facebook knows which version of the css you are referring to.


The iframe looks a bit more complicated but is easy enough. At the end of the long line

src="http://www.facebook.com/plugins/likebox.php?href=[...]Miklas-Njor-Fotografi%2F1 92308877480168&amp;[...]height=427 YOUR CODE HERE "

you add the link to your css file before the .

src="http://www.facebook.com/plugins/likebox.php?href=[...]Miklas-Njor-Fotografi%2F1 92308877480168&amp;[...]height=427&amp;css=http%3A%2F%2Fmiklasnjor.com%2F%3Fsfc-fanbox-css%3D1"

Remember to substitute the ASCII characters:

…css=http://miklas… => …css=http%3A%2F%2Fmiklas…
…njor.com/?sfc-fanbox-… => …njor.com%2F%3Fsfc-fanbox-…
…css=1 => …css%3D1

The iframe version doesn’t use ?1 but =1, so remember to change = with %3D (%3D1)

The end result will look something like this:

iframe src="http://www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww. facebook.com%2Fpages%2FMiklas-Njor-Fotografi%2F192308877480168&amp;width=292&amp; colorscheme=light&amp;show_faces=true&amp;stream=true&amp;header=true&amp;height= 427&amp;css=http%3A%2F%2Fmiklasnjor.com%2F%3Fsfc-fanbox-css%3D1" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:427px;" allowTransparency="true"

Okay. Now that the installation is out of the way. Lets get creative and style the box.

Detailed descriptions

Below the image I’ve written how I style my facebook fanbox.
how to css style facebook facebox facepile and pagestream

1 – The entire box

NOTE: This is the box itself. I’ve chosen to give it an orange border.
As a precaution I’ve included the a:link etc to make sure all links get styled as I want. Later we can change the styling of the links since the css for those items is loader later and therefore take precedence.

.fan_box .full_widget {border: 1px solid #F50;}
.fan_box .full_widget a:link {color: #F50;}
.fan_box .full_widget a:hover {color: #000;}
.fan_box .full_widget a:visited {color: #F50;}
.fan_box .full_widget a:active {color: #F50;}

2 – Connect header

.fan_box .full_widget .connect_widget_facebook_logo_menubar {background: #F50; border: 0;}

2A – Connect header facebook image

.fan_box .full_widget .connect_widget_facebook_logo span {background:transparent url(http://website/themfolder/img/facebook_link.gif) no-repeat ; display:block; height:17px; width:90px}
.fan_box .full_widget .connect_widget_facebook_logo:hover span {background-position:left -17px}

NOTE: I didn’t like the way how the blue edge around the facebook looked, so I downloaded it and gave it a new colour. The link might change but I got the image from here.

3 – Connect top

.fan_box .full_widget .connect_top {background: #fdd5c1; border-bottom: 1px solid #F50;}

3A – Connect top image

.fan_box .full_widget .connect_top img {padding: 0; margin: 0 1em 0 0; border: 1px solid #F50;}

3B – Connect top – Name (Miklas Njor Fotografi)

.fan_box .full_widget .connect_top .name_block {color: #F50;}
.fan_box .full_widget .connect_top .name_block a:link {color: #F50;}
.fan_box .full_widget .connect_top .name_block span.name a:link {color: #F50;}
.fan_box .full_widget .connect_top .name_block:link {color: #F50;}
.fan_box .full_widget .connect_top .name_block span.name:link {color: #F50;}

3C – Connect top The Like Button

.fan_box .full_widget .connect_widget_like_button {border: 1px solid #F50; background: #f0f0f0;}
.fan_box .full_widget .connect_widget_like_button span {color: #f50;}
.fan_box .full_widget .connect_widget_like_button:hover {border: 1px solid #F50; background: #F50; color:#FFF;}
.fan_box .full_widget .connect_widget_like_button:hover span { color:#FFF;}
.fan_box .full_widget .connect_widget_facebook_favicon {background: url(http://website/themfolder/img/facebook_thumbsup.gif) no-repeat -1px -47px transparent;display:block;height:14px;padding:0 0 0 0;width:14px;position:absolute;left:-1px}
.fan_box .full_widget .connect_widget_like_button .liketext {background:url(http://website/themfolder/img/facebook_thumbsup.gif) -1px -33px no-repeat}

NOTE: Same as above I downloaded the image and changed it. I got it from here

4 – Pagestream – all stories

.fan_box .full_widget .page_stream {background-color: #f0f0f0; color: #222;}
.fan_box .full_widget .page_stream a:link {color: #F50;}
.fan_box .full_widget .page_stream a:hover {color: #000;}
.fan_box .full_widget .page_stream a:visited {color: #F50;}
.fan_box .full_widget .page_stream a:active {color: #F50;}

4A – Pagestream – single story

.fan_box .full_widget .page_stream .UIStory {background: #fff; padding: 6px; margin: 5px 0;}

4B – User link – Miklas Njor Fotografi

.fan_box .full_widget .page_stream span.UIIntentionalStory_Names {margin: 0 0.5em 0 0;}
.fan_box .full_widget .page_stream span.UIIntentionalStory_Names a:link {color:#222;}
.fan_box .full_widget .page_stream .UIIntentionalStory_Names {color:#222;}
.fan_box .full_widget .page_stream .UIIntentionalStory_Names a:link {color:#222;}
.fan_box .full_widget .page_stream .UIIntentionalStory_Names a:hover {color:#222;}
.fan_box .full_widget .page_stream .UIIntentionalStory_Names a:visited {color:#222;}
.fan_box .full_widget .page_stream .UIIntentionalStory_Names a:active {color:#222;}

4C – ‘Det er bare så fedt at han svæver’

.fan_box .full_widget .page_stream span.UIStory_Message {color:#222;}
.fan_box .full_widget .page_stream .UIStory_Message a:link {color:#222;}
.fan_box .full_widget .page_stream .UIStory_Message:before {content:”\0022″; }
.fan_box .full_widget .page_stream .UIStory_Message:after {content:”\0022″;}

NOTE: I am using the pseudo css styles :before and :after to insert the character before and after the text. You can use any character from this list of HTML entities. You can also use images. The pseudo classes don’t work in IE6 and IE7.

4D – Post Images

.fan_box .full_widget .page_stream .UIStory img {border: 1px solid #F50;}

4E – Post title – Kim Rahbek Svæver – Direktør Sticks n Sushi

.fan_box .full_widget .page_stream .UIStoryAttachment_Title {color: #F50;}
.fan_box .full_widget .page_stream .UIStoryAttachment_Title a:link {color: #F50;}
.fan_box .full_widget .page_stream .UIStoryAttachment_Title a:hover {color: #F50;}
.fan_box .full_widget .page_stream .UIStoryAttachment_Title a:visited {color: #F50;}
.fan_box .full_widget .page_stream .UIStoryAttachment_Title a:active {color: #F50;}

4F – Websitelink – miklasnjor.com

.fan_box .full_widget .page_stream .UIStoryAttachment_Caption {color:#666;}

4G – Bodycopy – Direktør for Sticks ‘n’ Sushi, Kim Rahbek Hansen, drikker…

.fan_box .full_widget .page_stream .UIStoryAttachment_Copy {color: #222;}

4H – Pagestream – borderbottom

.fan_box .full_widget .page_stream {border-bottom: 1px solid #F50; }

5 – Facepile

.fan_box .full_widget .connections {background-color: #f0f0f0;}

5A – Facepile text – x people like Miklas Njor Fotografi

.fan_box .full_widget .connections .connections_grid {margin-top: 0.8em;}

5B – Facepile – Facesgrid

.fan_box .full_widget .connections .connections_grid .grid_item {margin-right: 0.65em; color:#F50;}
.fan_box .full_widget .connections .connections_grid .grid_item a {color:#F50;}

That’s it – stop editing :)

There are plenty more items to style, but these I believe to be the most important. If you want to find more details about each element I recommend installing Firebug for Firefox.