Category Archives: Programming

Disable Arrows on Number Inputs

HTML5 introduced some interesting form element changes. Inputs can now have an input type of “number”.

Web Browsers set character input restrictions and validation parameters for this input type. It will restrict to characters 0-9. This is great because it reduces the code overhead required to ensure a user enters the correct data. It will also show a numeric keypad on devices with dynamic keyboards. You should always have server side form validation. By using a number input you’re not relying entirely on JavaScript for client side validation.

Unfortunately there are now a couple of caveats to using the number input, depending on your use case. Firefox and Webkit browsers will show an Up and Down arrow for the user to increment the number. These can get in the way of styling or cause user error. The other issue is that this increment can be adjusted with the Mouse Wheel and the Up and Down keys.

The below code will allow you to remove the increment arrows and maintain the other benefits of a number input.

Ticker Using CSS Transitions & jQuery

The other day I was looking for a lightweight ticker to show some special offers. I couldn’t do this entirely with CSS (CSS3 Transitions). Some JavaScript is required to toggle an active state. I also wanted the ticker to pause when you mouse over the element. I forgot that I could use the Carousel built into Bootstrap, which the site does use, so I wrote my own jQuery plugin. Rather than delete the plugin, I thought I would share it.

The HTML is simple. You’ll need a wrapping element with some children. Give the wrapping element a class for its role ‘ticker’. For each of the children you want it to toggle the active state, add class ‘item’. The first item you want to show should be given the class ‘active’.

Next we need some CSS. There is many transitions you can create. I want a crossfade and a vertical movement. I have provided just what is required to make the animation work.

And then finally, the JavaScript. I wrote this using jQuery, which means you will need to add this before my plugin if its not already there.

Then use this to execute the plugin.

If you are using Bootstrap. You can forget about the jQuery plugin I created. But you can use the CSS, just change class ‘ticker’ to class ‘carousel’ and add the other attributes below.

All you need to do now is add your own finishing touches!

Use CloudFlare to Secure WordPress by Country Codes

Firstly, check that you have the IP Geolocation option enabled on CloudFlare.

The most efficient way to do this with PHP would be to place the code below in the top of your wp-login.php, but WordPress will overwrite this file when it updates. The next best position is at the top of wp-config.php. If you follow the way WordPress loads, wp-login.php will require wp-load.php first, then after 4 minor lines of code, it will then get wp-config.php.

This is just a different interpretation of my friends script. My version does not allow WordPress to waste CPU before booting the IP from the login page. It also allows for an IP whitelist to bypass this for trusted IP addresses.

It is best to pair this with a plugin like Simple Login Lockdown. There are also some useful .htaccess rules you can use, but I won’t go into that here.

Stay logged in with WordPress on Subdomains

A clients site performs some magic to show different content per subdomain. By default each subdomain asks you to login, which is a bit annoying. It would be convenient if admins of a single WordPress installation could stay logged in when they jump between subdomains. Due to unique requirements, we’re doing this without WordPress Multisite.

I found that all we needed to do was set the cookie domain and path in wp-config.php. At first it seemed only COOKIE_DOMAIN and COOKIEPATH would be needed, but it did not behave until COOKIEHASH was also set. You could probably set it to anything you like, I just had a defined variable already.

This may also work between WordPress installations across subdomains. I haven’t tested this theory. Both installations would require the same login details and this config. It is working with WordPress versions 3.8+.

How to Improve FeedWordPress

feedwordpress-logoFeedWordPress is probably the best free plugin to grab articles from WordPress RSS feeds. Syndication is not the best practice, but it suits the needs of a client and their site network.

With WP_DEBUG enabled, the plugin does show strict standards warnings on newer versions of PHP. The author did add hooks, so we can make some changes in functions.php without editing the plugin.

The worst issue found was with Categories and Tags. WordPress RSS feeds have no differentiation between taxonomies, they are all listed as follows: <category><![CDATA[ Taxonomy ]]></category>. We could have customised the feeds, but then the functionality wouldn’t be compatible with other WordPress sites. The best way around this, is to have your own local Categories, and assign all that don’t match as Tags.

This then brings me to the option Don’t syndicate posts unless they match at least one local Category’. The option doesn’t work. As you can imagine it leads to articles importing without a category assigned, not even ‘Uncategorized’. Without any category at all, these posts don’t display on the website and clutter your archive. The best workaround I could think of to keep these articles useful, was to assign the WordPress default category (or one you desire) as they import.

The next issue is that sometimes the excerpts from the RSS feed have a Read More link. We’ll need to strip that out to prevent display issues on our website.

FeedWordPress has a nasty habit of syndicating duplicate posts when tapped into multiple feeds. So lets just move them to trash on import.

Lastly, we don’t want search engines to index these articles, they aren’t original content on our website. I also make use of Yoast WordPress SEO, we’ll use that to our advantage.

As you can see, we managed to get around our FeedWordPress issues without needing to modify a single line of code in a plugin. Maybe this will help you do something similar. I do hope the author will eventually update the plugin to improve the situation.