BusnHours – A Business Hours Plugin for WordPress

Just about every business displays an open and close hours notice in their store front or on their website. Since this is a common task for me and many web developers to create for clients, a few years back I created a JavaScript/jQuery app that not only displayed the hours, but highlighted the current day of the week and showed an animated “open” notice appended next to that particular day based on the current time the page was visited. This gave a polished and professional look to the site and made it easier for customers to acknowledge if your business was currently open or closed.

Business Hours

Since I’ve had an increase in request over the past few years for WordPress websites, I decided it would be beneficial to create a WordPress plugin version that would not only be super easy to add to the site during development, but would allow my clients to easily change and edit their business hours through accessing its settings page.

busnHours works by retrieving your server time and with your location setting configured, displaying an accurate time that your business is opened. If a visitor to your website is viewing the business hours section of your web page minutes before your open or just before your closed, the notice will change immediately when your business hours time matches the current time your opened or closed. I refrained from using multiple Ajax calls every second to the server to constantly update the app since that can weigh in on your servers CPU or even give issues to WordPress. This gets the server time once and runs a JavaScript clock to power the notification. busnHours can be placed on any page or blog with a simple shortcode.

busnHours only supports businesses hours of operation from 6:00am to 10:00pm. Future updates will support Holidays settings and more customizations. This plugin for a limited time is available as a free download. Eventually it will only be available by either a paid one time fee or annual subscription with support and free updates. For details, info and to download, please visit the busnHours plugin page.

Cool Features

  • Non-live server polling powered by a JavaScript clock using first and only server poll to keep track of time, reduces server load
  • Animated Notice when Open
  • 6 Messages, 3 when your open, 3 when closed. Messages are when open = “Almost Open”, “Just Opened” and “Open Now” Messages when Closed = “Almost Closed”, “Just Closed” and “Closed Now”.
    These messages are shown in a frequency of 15 minutes, at 15 to prior/exact time/15 after time

Business Hours Demo Below

2
16
33
PM
46
#005a7b
  • SUN Closed
  • MON 9:00 AM - 5:00 PM
  • TUE 9:00 AM - 5:00 PM
  • WED 9:00 AM - 5:00 PM
  • THU 9:00 AM - 5:00 PM
  • FRI 9:00 AM - 5:00 PM
  • SAT Closed

Getting and setting image width with jQuery based on their original size

You may be developing a website where a gallery or portfolio application of photos that will be uploaded in various sizes. Creating responsive CSS for images we typically set a width of 100% and then add a max-width of a specific size such as 1900 pixels to allow scaling for mobile devices. However if your image is below 1900 pixels wide, lets say at 1000 pixels wide, you’ll get an upscale to 1900 pixels wide creating a non-pixel perfect blurry image. A solution if needed with jQuery is to use JavaScript’s ability to get the original images size and auto apply it to the image with a max-width of whatever that image size is. Below is an example of code on how to do so within a a container with a class name of “photos”.

HTML


jQuery

As you can see by code this will get all images within the container using jQuery’s “each” loop and apply their max-width size as an inline style on each image. Of course you’ll need your CSS setup like below as example max-width 1900 pixels. I chose this size since I only develop websites to max fit standard HD resolution. Notice its 1900 not 1920 to allow for 10 pixels of padding on left and right sides of the container(“photos”) or your body tag for mobile:

CSS

Tip
Your image will abruptly change size after loading, that’s why its best to set an opacity on them at “0” and once the page is loaded add the opacity of “1”. You can animate a fade in with jQuery or even take it a step further and add a loader per image. Typically if your building a web photo application these are things you would do.