Remove Extra Line after Smiley Faces in WordPress

So I noticed in one of the wordpress blogs I am working on that while the emoticon (smiley faces) I was using were properly being converted into images, they all had an extra line spacing after all of them. Needless to say this was quite annoying and screwed up the paragraphs in my posts. Getting rid of the extra spacing around the smiles was quite easy once I knew the correct search terms (display emoticon inline). After a bit of digging and fooling around with the styles in chromes Developer Tools I figured out my smiles were inheriting the “display: block” from another class. To solve the problem I included the following line into the style sheets and all the extra spacing was removed.

img.wp-smiley {display: inline;}


WordPress Archive Widget: Post Count on the same line.

My WordPress theme rendered the page count for the archive widget in the side bar incorrectly.  The page count was showing up on the next line below the link for each month. This looked really tacky to me and it turned into a bit of a chore to figure out how to fix it. I eventually got it working and now the page count correctly shows on the same line to the right of each month.

My solution was to change the get_archives_link() function located in wp-includes/general-template.php on line 842 as follows:

I changed this

$link_html = “\t<li>$before<a href=’$url’ title=’$title_text’>$text</a>$after</li>\n”;

to this

$link_html = “\t<li>$before<a href=’$url’ title=’$title_text’>$text<span style=’color:#999;’>$after</span></a></li>\n”;

NextGen Gallery & NextGen GalleryView Plugin Problems

I have been working on another blog that I intend to include a lot of pictures in. The default wordpress gallery was not meeting my needs so I decided to try some free gallery plugins to see if I could get any of those to work for me. The NextGen Gallery plug-in seemed to fit the bill, and then after a bit more digging I found a plug-in extension called the NextGen GalleryView (yeah I know names are very similar) which did exactly what I wanted.

 After installing and uploading a gallery and adding “[galleryview id=1]” it to one of my posts, the filmstrip / carousel at the bottom of the gallery (the single feature that I was most interested in) was not working properly. The thumbnail images showed up on two different lines which messed up the whole filmstrip. Also, there was a strange black box in between each one of the thumbnails.

 In the dashboard under the NextGen GalleryView options when I would view the example / preview it appeared the whole thing was working just fine. However when I paste in the short code and try to view the blog post itself the filmstrip would be all messed up. I am not a word press expert, but I am assuming that if the gallery preview is working in the dashboard but not your posts, then it is likely a theme conflict you are dealing with.

 To me it seemed like the spacing between each image was off and a HTML bullet was being added into the list between each picture. I troubleshooted (is that a word?) the problem in the Chrome developer tools by disabling the different styles one by one to help me narrow down what was causing the problem. I tried to disable anything that had to do with spacing, margins, padding etc until the filmstrip looked like it should. I eventually found that my chosen theme (Adventure Journal Theme) was adding a margin-left to everything as well as adding a stylized bullet to all the list items on the page.

To solve the spacing problem and get all the thumbnail images on to the same line I set margin to 0px in the “frame” class which is found at about line 63 in wordpress-nextgen-galleryview/GalleryView/css/galleryview.css file

/* FILMSTRIP FRAMES (contains both images and captions) */

.frame {}


/* FILMSTRIP FRAMES (contains both images and captions) */

.frame {margin:0px}

To get rid of the square bullet that was being inserted between each thumbnails I had to edit the style sheet for the theme. For my theme it was located at wp-content/themes/adventure-journal/style.css. I changed

ul li{




ul li{



And viola…I now have a working image gallery with an awesome filmstrip at the bottom.  I imagine using this plugin with other themes you might have similar problems which can be solved in similar ways.

WordPress Page IDs

Using the wordpress “page” widget for the side bar works wonderfully for displaying a list of static pages on your blog.  However by default it displays all of your pages and you may not want this. Luckily the widget comes with the ability to excluded pages.  Less lucky is that in order to exclude the pages you need to know the “page ID”.  As far as I can tell the “page ID” is not displayed anywhere and requires a bit of digging to find.   After logging into the admin dashboard area select the “pages” link.  From there you will be given a list of all the current pages you have created.  An easy way to find the “page ID” is to mouse over (hover not click) the page in question.  If you look at your browser status bar you will notice a link in which you will see “post=” some number.  This post number is the page ID.

For example – If your status bar displayed this:


Your page ID would be 57



WordPress captcha problems

On the web one of the most useful tools to combat spam and reduce abuse is a captcha. For this blog I felt that a captcha system was a “must have” as I intend on letting users input comments. I found a free wordpress captcha plug-in made by bestwebsoft ( looked very promising. However to my dismay after installing and activating the captcha plugin, the system did not work. I tried installing other captcha plugins, but they all required API keys and this was unacceptable to me. So I decided to try and get the bestwebsoft plugin to work.

I could tell that the captcha system was activated because it would give me an error if I tried to submit a comment, however the catcha form itself was not showing up in the comments section. To trouble shoot I reactivated the default theme that came with wordpress and the captcha form worked perfectly, so I knew it was a theme issue. It appears that whoever designed the theme I am using didn’t use the default wordpress “comments form” and was manually creating the form from scratch. In order to get the form to show up all I needed to do was include the following line of code in themes comments.php file where I wanted the form to show up.

<?php echo cptch_comment_form();?>

The next problem was that a mysterious “1” was being generated after the captcha form. To solve this problem I had to edit the function “cptch_comment_form()” in the captcha.php plugin file to not return anything. (i.e. from “return true;” to just “return;”). To be truthful I am not entirely certain what all the implications of doing this will be, but the captcha system appears to be working fine.

I imagine other wordpress themes will also be designed this way and will require a similar work-around to get the captcha plugin working.


It appears this problem has been fixed in the most recent version, so if you are still having this issue try updating the plugin

Customizing WordPress Headers

Word press is simply amazing…I’m constantly amazed by the quality of open source software, but that is another topic for another day

As I was setting up my installation for this blog I wanted to customize the header image and style.  I turns out this tasked proved to be a bit more tricky than I had first imagined.  I spent more time then I care to admit trying to edit the header div and image using the appearance editor tool in the admin area.  What took me so long to figure out was that there are multiple css files and the properties I was trying to change were in a different css file altogether.  Even more tricky was that this file was not available in the appearance editor tool.  I found it  in the  “wp-content/themes/” folder.

Now I know that this may be a no-brainer for some, but for me it was a bit tricky because it was not what I was expecting. Here is a trick I learned that might make this easier in the future to help identify the location of the correct css file. In many modern web-browsers you can right click and choose to inspect the element.  This will give you a run down of all the css properties that are currently being applied to that element along with the name/location of the css file (In Chrome you have to mouse over the file name to get the location).

So, if you want the customize the header for your word-press blog just right click on the header somewhere and select “inspect element”.  From here it is simple to figure out the location of the files with the properties you want changed.  After that use your favorite FTP program to download the file and make the desired changes.


Unwanted Border around an Image Link

Turns out I am having a harder time customizing this wordpress installation than I imagined. The theme I chose has a default css mouse rollover effect applied to all the anchor tags. I like the effect for the text, but this same effect was applied to the border image and it looked awful. I tried setting the border to 0 with the HTML but this did not work. What I had to do was create a completely new class setting all the attributes to none and then apply this class to the anchor tag around the header image. Like this…

a.headerImage {color: none;border: none;}
a.headerImage:hover {color: none;background: none;border: none;}

and then use the following html to assign the class to your anchor tag

<a href=’’ class=’headerImage’>