Adding bullet points and numbers to the WordPress Popular Posts widget

Adding bullet points

I am a big fan of the WordPress Popular Posts widget as it offers a simple way to surface your most engaging content and posts via widgets on your site or blog.

It is very simple to use, and the popularity of your posts can be displayed according to pages views, comments and more, over a time-period that you can define (e.g. most popular over 24 hours, 7 days etc…)

This means you can have multiple widgets on your blog exposing different content. For example, you could add a widget to your footer and call it ‘Most Popular of All Time‘ and display all time popular posts by page view. And, at the same time, you could have a widget in your sidebar called ‘Trending Topics’ and set it to display the most popular posts for the last 24 hours.

Both widgets would end up displaying different content, despite being generated from the same plugin, and would add more exposure for your content to your visitors.

I have use the WordPress Popular Posting this way across a number of websites that I am developing and it works like a dream.

When you activate the plugin and add the widget to your sidebar, you get the chance to add a title, but the default display of your links is a bit bland. This is what my sidebar widget for this blog looked like when I first put the widget in the sidebar:

Popular Posts with no formating

One thing that I quickly wanted to work out how to do was to add styling and formatting to this plugin. As you can see from the image above, it does the job well enough, but it looks unstructured and needs some formatting to help the readers eye see where one Post title ends and another begins.

Plus it would be nice to add bullets or numbering indicators.

The developers of the plugin have assembled a really simple guide to help you with the styling which you find here.

I used this guide to create the numbered ‘popular posts’ that you can see below:

Popular Posts with bullet points

Adding formatting to the WordPress popular Posts widget

I will share what I did below, which is not a huge departure from the instructions that can be found here, but I made some minor changes to the code so that it would be more suitable for my site (the original code has dark backgrounds on the numbered list and I wanted a plain white background). The instructions below are pretty much the same, but it took me a couple of attempts to customize it how I wanted as I didn’t want the colour schemes that are featured in the official guide – so I figured I may as well share it here for when I forget and need to come back and remind myself what I did, should I need to do it all again.

1. First we added the following code to our CSS stylesheet (Dashboard > Appearance > Editor > Style.css)

ol.wpp-list {
counter-reset:li; /* Initiate a counter */
margin-left:0; /* Remove the default left margin */
padding-left:0; /* Remove the default left padding */
}

ol.wpp-list > li {
position:relative; /* Create a positioning context */
margin:0 0 6px 2em; /* Give each list item a left margin to make room for the numbers */
padding:4px 8px; /* Add some spacing around the content */
list-style:none; /* Disable the normal item numbering */
border-top:2px solid #666;
background:#fff;
}

ol.wpp-list > li:before {
content:counter(li); /* Use the counter as content */
counter-increment:li; /* Increment the counter by 1 */
/* Position and style the number */
position:absolute;
top:-2px;
left:-2em;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
width:2em;
/* Some space between the number and the content in browsers that support
generated content but not positioning it (Camino 2 is one example) */
margin-right:8px;
padding:4px;
border-top:2px solid #666;
color:#fff;
background:#666;
font-weight:bold;
font-family:"Helvetica Neue", Arial, sans-serif;
text-align:center;
}

2. Then add your widget to the sidebar and click on the checkbox for Use custom HTML Markup in the ‘HTML Markup settings‘ and add <ol class="wpp-list"> and </ol> in the ‘Before/after popular Posts’ section, and then add <li>{title}</li> to the ‘Post HTML Markup‘ input box.

You can see the screenshot from our widget below to see where to paste the updates.
WordPress Popular Posts

And that was how we turned it into a numbered list with a white background.

How to turn comments off on a WordPress Home Page (or any static page)

This is a post for WordPress newbies who still need a bit of help in configuring some of the basic settings on WordPress when setting up their first websites or blogs.

Specifically, this post will show you how to turn ‘comments’ off on your Homepage, or indeed, any static page created in WordPress.

WordPress is sociable by default – the ability for a visitor to comment on your blog or your pages created in WordPress is the standard setting. And this is great, it promotes discussion, and useful comments all add to the richness and value of your subject material. Blogs are meant to be sociable, right?

However, sometimes you just want to create a great looking website with WordPress and you don’t want your homepage to stretch on into infinity with comments making it look like a blog post. Sometimes you just want a simple homepage that simply states your offer or gives the user some key pieces of content that they can use to start exploring your website with.

A common use case I have is using WordPress to create a micro-site, and I create a custom page in WordPress for the homepage and then have the blog functionality linked as a part of the sub-nav or header. The main homepage then becomes a permanent static page.

So how do I turn the Comments off in WordPress?

So here is the good news – its is easy to turn comments off on a specific WordPress page.

  1. Once you have created your page, then simply go to your WordPress dashboard and click on the ‘Pages’ section in the left-hand nav bar.
  2. Hover over the name of the page that you want to turn the comments off on, you should see the ‘Quick Edit’ option appear – click on it
  3. On the right hand side, above the ‘status menu’ you should see a check-box called ‘Allow Comments’. Uncheck it, and it will prevent comments from being added to the page.

A picture tells a thousand words, so check out the image below to see how you turn off comments on a specific WordPress page:

how to block comments on wordpress pages

How to find an unclosed Div tag

This post is about making a change to your WordPress site and leaving an div tag open…and finding out that it screws up the layout of your website or blog….often pushing the sidebar down to the footer of the page where WordPress is concerned.

So, you have installed WordPress, found a theme that ticks most of the boxes and has most of the features that you are after for your blog or website.

You have got the site into shape, you have some content up, you have allowed it to be found by search engines…..you are pretty much ready for the world.

There are just a few things that you want to do in order to add some personal touches that involve opening the WordPress Editor (Appearance > Editor). Maybe you wanted to add something to the footer of all your posts, maybe you wanted to change the sidebar….whatever it was it involved you making a minor tweak to the code of your website. Maybe you just tried to add a piece of code to one of your posts and didn’t even open the WordPress Editor at all.

Anyway, you made your changes and hit ‘save’ or ‘publish’.

You go back you admire your work but…….crap, the whole website is screwed up. What happened?

WTF! My WordPress sidebar has fallen to the footer of the site?:

I have done this many times – made a quick change to a blog (usually late at night when I don’t have the time, will, or energy to subsequently fix it) and found that I have f**ked something up.

One of my common issues is making a change and then finding that my WordPress sidebar is no longer where it should be, and has fallen down to the bottom of the website, so it is now found below the footer.

This can be caused by a few things – one common example is trying to insert an image into a post that is too large. For example, trying to force a 2000px image into a post with a fixed width of 600px means that something will break – usually your template.

My most common error is leaving an open div tag in a post or in the actual theme after using the WordPress Editor.

Check the screenshot below to see an example of an unclosed div tag:

example of an unclosed div tag:

Everytime my Sidebar slides down the page it is 99% of the time caused by an unclosed div tag.

So how do you fix it?:

Finding an unclosed tag can be a pain, especially if you don’t really remember when you might have introduced the issue. You can either wade through your html/markup looking for errors, or you can make your life easier by using some free automated tools to do the job for you.

There are a few tools that I use to check for unclosed div tags, in fact, it is good practice to use these tools for checking your site for any markup errors and to ensure that your code/markup is valid.

The DIV Checker (http://www.tormus.com/tools/div_checker)
A simple, and free tool for checking your div tags. If you want to ensure that every div tag in your website has a corresponding closing tag, then simply enter your url, click ‘go’ and you will get a simple report back of any issues with your div tags. This tool has saved me multiple times in the past.

The W3C Mark-Up Validator (http://validator.w3.org/):
This validator checks the markup validity of Web documents in HTML, XHTML, SMIL, MathML – simply enter the url of your website into the site, press a button – and you get a list of any invalid markup that you should be fixing.

Running a check on your site using The W3C Mark-Up Validator is awesome, but if your site is complex, then it might still be tricky to find an unclosed div tag, so if that is the case then use the first link above to locate the div.

Why is my WordPress blog not indexed?

Another very basic post, but if you are brand new, and I mean ‘brand new’ to wordpress it will hopefully save you some time.

In your early days of experimenting with WordPress you may wonder why your blog is not indexed in any of the search engines. Indexing can take time, but one of the first things you should check is whether your blog is even visible to search engines.

Annoyingly, when you first install WordPress it automatically sets your blog default as “I would like to block search engines, but allow normal visitors”. So no matter how kickass your blog is, or how unique your content is, it won’t get indexed in any search engines.

The good news is that this is easy to change. When you are satisfied that you are happy with the content on your blog and you are ready to unleash it on the world, simply follow the steps below to make your blog visible and accessible to search engines.

  1. From your WordPress dashboard go to ‘Settings’ (usually found in the bottom left section of your dashboard), and click on the ‘Privacy’ link.
  2. On the ‘Privacy’ page you will see 2 radio buttons under a title that says ‘Blog Visibility’. If you have just installed WordPress then you will notice that the “I would like to block search engines, but allow normal visitors” will be selected. Simply change this by clicking on “I would like my blog to be visible to everyone, including search engines (like Google, Bing, Technorati) and archivers”
  3. Click Save

Told you this was a simple, and very basic level post – but this is an easy thing to overlook for newcomers to WordPress. Hope it saves you some frustration.

How to Change the Font Family on Your WordPress Blog

This is a basic, entry level post for newcomers to WordPress who want to know how to change the fonts on their blog.

I have been using free wordpress themes for a while now – they represented the best way for me to get a blog template for zero cost, and allowed me to start experimenting with generating content online and playing around with affiliate sites.

I’ve tried a lot of themes out and whilst each one has its benefits, each one also has its drawbacks. For example, I’ve found adsense ready themes that save me a ton of time when setting up new niche blogs, but at the same time I’ve needed to dive into the templates and the CSS to make changes to things like fonts, width, banner placements etc…etc…

One thing that is pretty easy to change is the Font Family used on your WordPress Blog. Some free themes come with fonts that may not be to your taste. This post shows you how to change them at the most basic level in the CSS.

Firstly, why are font families used?:

Browsers use default fonts, and if you code up a blog or a website that specifies a single font, then there is a chance that this could cause issues for any vistors that you may get who lack that font. However, these days this is pretty rare if you are using the most common fonts.

The concept of using ‘font families’ removes this issue by grouping various fonts, and if a user that arrives at your website or blog does not have the first font in the family, then it will simply use the next one in the family group, and so on…..

Basically the premise here is that not every computer is equal when it comes to fonts, and if the reader of your blog does not have, lets say Verdana, then it will use the next font in the font family.  Cascading style sheets solve the problem of having only one font by allowing groups of fonts (or ‘families’) to be specified.

There are essential 5 families which tell a user’s browser the chosen style of typeface to display if none of those specified are available. These families are:

  • serif
  • sans-serif
  • cursive
  • fantasy
  • monospace

How do I change my font then?:

Go to your WordPress template editor (usually: Dashboard > Appearance > Editor) and open your Stylesheet (style.css). Find the code that looks like:

  • body {
    margin: 0;
    padding: 0;
    background: #E8E8CE url(images/background1.jpg) repeat;
    font-size: 78%;
    font-family: “Lucida Grande”, “Lucida Sans Unicode”, Verdana, Arial, sans-serif;
    color: #333;
    text-align: center;;

Note that there is a line that specifies the ‘font-family’. In order to change the fonts, simply amend the font family. Here is an example below of a niche blog that I set up where I wanted to change the fonts. I amended the code above to include a different family of fonts (see the bold type below to see what i changed)

  • body {
    margin: 0;
    padding: 0;
    background: #E8E8CE url(images/background1.jpg) repeat;
    font-size: 78%;
    font-family: ‘Lucida Grande’, Verdana, Arial, Sans-Serif;
    color: #333;
    text-align: center;;

Easy. Try out the following font families in your blog to see what style suits you best:

  • font-family:Verdana,Geneva,sans-serif;
  • font-family:Tahoma,Arial,Helvetica,sans-serif;
  • font-family:Georgia,Utopia,Palatino,’Palatino Linotype’,serif;
  • font-family:’Times New Roman’,Times,serif;
  • font-family:’Courier New’,’Courier’,monospace;