- Standard shortcode
- Table designs
- Opening hours as text
- Consolidation
- Conditional shortcodes
- Conditional special opening hours
- Labels and notes
- The time now
- Replacement text and logic
- Replacement text reference
Standard shortcodes
Just the standard opening hours (placed in a shortcode block) without anything added.
[open]
Monday: | 09:00 – 18:00 |
---|---|
Tuesday: | 09:00 – 18:00 |
Wednesday: | 09:00 – 18:00 |
Thursday: | 09:00 – 18:00 |
Friday: | 09:00 – 18:00 |
Saturday: | 09:00 – 14:30 |
Sunday: | Closed |
The following shortcodes can be placed in a normal text block; rather than a shortcode block. Once placed in the editor, check in the browser HTML to ensure that you’re compliant with web standards.
[open list]
- Monday: 09:00 – 18:00
- Tuesday: 09:00 – 18:00
- Wednesday: 09:00 – 18:00
- Thursday: 09:00 – 18:00
- Friday: 09:00 – 18:00
- Saturday: 09:00 – 14:30
- Sunday: Closed
[open lines]
Monday: 09:00 – 18:00
Tuesday: 09:00 – 18:00
Wednesday: 09:00 – 18:00
Thursday: 09:00 – 18:00
Friday: 09:00 – 18:00
Saturday: 09:00 – 14:30
Sunday: Closed
[open sentence]Monday: 09:00 – 18:00; Tuesday: 09:00 – 18:00; Wednesday: 09:00 – 18:00; Thursday: 09:00 – 18:00; Friday: 09:00 – 18:00; Saturday: 09:00 – 14:30; Sunday: Closed.
[open structured]
- Monday:
- 09:00 – 18:00
- Tuesday:
- 09:00 – 18:00
- Wednesday:
- 09:00 – 18:00
- Thursday:
- 09:00 – 18:00
- Friday:
- 09:00 – 18:00
- Saturday:
- 09:00 – 14:30
- Sunday:
- Closed
Table designs
There are many designs available built into the plugin’s functionality.
[open class="hours-right outside-flush no-border"]
Monday: | 09:00 – 18:00 |
---|---|
Tuesday: | 09:00 – 18:00 |
Wednesday: | 09:00 – 18:00 |
Thursday: | 09:00 – 18:00 |
Friday: | 09:00 – 18:00 |
Saturday: | 09:00 – 14:30 |
Sunday: | Closed |
[open class="hours-right outside-flush no-border" consolidation="separate" time_format="12_dot_trim"]
Weekdays: | 9am – 6pm |
---|---|
Saturday: | 9am – 2.30pm |
Sunday: | Closed |
[open class="hours-right current-line past-fade" day_format="short_date_short_month" time_format="12_dot_trim" update=true]
Mon 7th Oct: | 9am – 6pm |
---|---|
Tue 8th Oct: | 9am – 6pm |
Wed 9th Oct: | 9am – 6pm |
Thu 10th Oct: | 9am – 6pm |
Fri 11th Oct: | 9am – 6pm |
Sat 12th Oct: | 9am – 2.30pm |
Sun 13th Oct: | Closed |
[open class="hours-right closed-italic past-fade" day_format="full_date_month" time_format="12_colon" update=true]
Monday 7th October: | 9:00am – 6:00pm |
---|---|
Tuesday 8th October: | 9:00am – 6:00pm |
Wednesday 9th October: | 9:00am – 6:00pm |
Thursday 10th October: | 9:00am – 6:00pm |
Friday 11th October: | 9:00am – 6:00pm |
Saturday 12th October: | 9:00am – 2:30pm |
Sunday 13th October: | Closed |
With special opening hours, you can list alternative hours over the holiday period.
[open class="hours-right closed-italic" day_format="full_date_month" time_format="12_dot_trim" start="2024/12/23" end="2024/12/28"]
Monday 23rd December: | 9am – 6pm |
---|---|
Christmas Eve: | 9am – 2pm |
Christmas Day: | Closed |
Boxing Day: | 12pm – 6pm Sale Day! |
Friday 27th December: | 9am – 6pm |
Saturday 28th December: | 9am – 2.30pm |
[open class="hours-right closed-bold" day_format="full_date_month_nos" regular=false start="2022/12/23" end="2023/01/03"]
Check out the HTML Classes section in the plugin’s settings located in the Shortcodes tab. Using the update parameter will refresh the design when the opening status and days change.
Opening hours as text
It is easy to add your opening hours as text in existing content or as a stand-alone section.
Our opening hours are: [open text time_format="12_dot_trim" closed="Oh no, we’re closed" day_separator="; | and "]
Our opening hours are: Monday: 9am – 6pm; Tuesday: 9am – 6pm; Wednesday: 9am – 6pm; Thursday: 9am – 6pm; Friday: 9am – 6pm; Saturday: 9am – 2.30pm and Sunday: Oh no, we’re closed.
Our opening hours are: [open text closed_show=false day_separator="; | and " consolidation="separate"]
Our opening hours are: Weekdays: 09:00 – 18:00 and Saturday: 09:00 – 14:30.
[open text tag="p" weekdays_text="" weekend_text="" everyday_text="" consolidation="weekdays"]
Monday – Friday: 09:00 – 18:00; Saturday: 09:00 – 14:30; Sunday: Closed.
All of these shortcodes can be placed in either the shortcode block or the standard text block. Be careful when only using the shortcode as you may need to add <div>
or similar as an enclosing element. Once placed, please check in the browser HTML to ensure that you’re compliant with web standards.
Consolidation
You may group days in the week and weekend separately, together or not at all.
[open consolidation="none"]
Monday: | 09:00 – 18:00 |
---|---|
Tuesday: | 09:00 – 18:00 |
Wednesday: | 09:00 – 18:00 |
Thursday: | 09:00 – 18:00 |
Friday: | 09:00 – 18:00 |
Saturday: | 09:00 – 14:30 |
Sunday: | Closed |
[open consolidation="separate"]
Weekdays: | 09:00 – 18:00 |
---|---|
Saturday: | 09:00 – 14:30 |
Sunday: | Closed |
[open consolidation="weekdays"]
Weekdays: | 09:00 – 18:00 |
---|---|
Saturday: | 09:00 – 14:30 |
Sunday: | Closed |
[open consolidation="weekdays" weekdays_text=""]
Monday – Friday: | 09:00 – 18:00 |
---|---|
Saturday: | 09:00 – 14:30 |
Sunday: | Closed |
[open consolidation="weekend"]
Monday: | 09:00 – 18:00 |
---|---|
Tuesday: | 09:00 – 18:00 |
Wednesday: | 09:00 – 18:00 |
Thursday: | 09:00 – 18:00 |
Friday: | 09:00 – 18:00 |
Saturday: | 09:00 – 14:30 |
Sunday: | Closed |
[open consolidation="all"]
Weekdays: | 09:00 – 18:00 |
---|---|
Saturday: | 09:00 – 14:30 |
Sunday: | Closed |
Note the weekend will only appear consolidated both days, here Saturday and Sunday, have exactly the same opening hours. Additionally, full consolidation using “all” will only occur when all days have identical opening hours.
Conditional shortcodes
You can enclose any text or HTML content within a shortcode to show or hide this depending on the current status of the business: open or closed.
[open_now]We’re open![/open_now] [closed_now]Sorry, we’re closed[/closed_now]
We’re open!
By default the content of the shortcode will update itself when the change of status occurs. An enclosing tag of <div>
or <span>
is added depending on the content of the shortcode. It is always better to specify your preference.
[open_now tag="div" update=false]<img src="/wp-content/uploads/Were-Open-Motif.svg" alt="We’re Open!">[/open_now]
[closed_now tag="div" update=false]<img src="/wp-content/uploads/Were-Closed-Motif.svg" alt="We’re Closed">[/closed_now]
If you are using a caching service on your website, the content of the page may be out-dated. So, you can perform an immediate check using the current time and returning the correct information.
[open_now update="immediate"]We’re currently open, but just checking because this website uses a caching service… The time is: [open_text]%now%[/open_text].[/open_now]
[closed_now update="immediate"]We’re currently closed, but just checking because this website uses a caching service… The time is: [open_text]%now%[/open_text].[/closed_now]
You can reload the entire page on the change from open to closed (or vice-versa). Nothing will appear if the business is currently closed. Note in the working shortcode, the reload functionality is disabled so that other shortcode instances will run uninterrupted.
[open_now reload=true]We’re open now so please drop into our shop![/open_now]We’re open now so please drop into our shop!
By default, there is no HTML present when the status doesn’t match. You can choose to set the hidden content to remain present in the element’s data.
[open_now remove_html=false]We’re open! <em>(HTML visible in source code)</em>[/open_now] [closed_now remove_html=false]Sorry, we’re closed <em>(HTML visible in source code)</em>[/closed_now]
We’re open! (HTML visible in source code) Sorry, we’re closed (HTML visible in source code)
Each shortcode has the parameter: class="open-text"
for illustrative purposes only. As a reference, the opening hours are:
Monday – Friday: 09:00 – 18:00; Saturday: 09:00 – 14:30; Sunday: Closed
and the time is: 13:57.
Conditional special opening hours
A new feature: conditional display of HTML and shortcodes if there are special opening hours in the future. This is particularly useful when holiday periods are coming and you want to conditionally show something if it exists.
[open_special start=0 end=31] <h3>Holiday opening times</h3> [open regular=false special=true day_format="short_date_short_month" start=0 end=31] [/open_special]
In order to illustrate this with some data, this example shows a preview rather than the plugin’s source data.
Holiday opening times
Christmas: | Closed |
---|---|
Boxing Day: | Closed |
Thu 27th Dec: | 13:00 – 18:00 |
Mon 31st Dec: | 13:00 – 18:00 |
New Years Day: | Closed |
Just showing any special opening hours for the standard week.
[open_special tag="div" empty=true] <h3>Special opening hours</h3> [open regular=false day_format="full_date_month_comma"] [/open_special]
If you don’t see anything, there are no special opening hours this week. There is an illustrative outline in this example, otherwise this element would be hidden from view.
Recommendations
- Remember to set
regular
to false parameters within any enclosed Shortcode. The parameterspecial
is true by default, but you can set this for clarity. - Set the same
start
andend
(orcount
) parameters if another shortcode is placed in the content zone. - You can use start with count and either a relative start day or a start date. See the Shortcode tab for more details.
- If there is no match, it will display nothing at all. You can overide this by setting the
tag
parameter and enabling theempty
parameter.
Labels and notes
You can apply your own labels for special dates, replacing the standard day or date formatting.
[open regular=false start=0 end=45]
Christmas Eve: | 09:00 – 14:00 |
---|---|
Christmas Day: | Closed |
Boxing Day: | 12:00 – 18:00 Sale Day! |
New Year's Eve: | 09:00 – 16:00 |
New Year's Day: | Closed |
[open regular=false start=0 end=45 day_format="full_date_short_month_comma" labels=false]
Tuesday, 24th Dec: | 09:00 – 14:00 |
---|---|
Wednesday, 25th Dec: | Closed |
Thursday, 26th Dec: | 12:00 – 18:00 Sale Day! |
Tuesday, 31st Dec: | 09:00 – 16:00 |
Wednesday, 1st Jan: | Closed |
Notes will appear after a set of opening hours with options to place a note before opening times or replace the times entirely.
[open regular=false start=0 end=45 notes="replace"]
Christmas Eve: | 09:00 – 14:00 |
---|---|
Christmas Day: | Closed |
Boxing Day: | Sale Day! |
New Year's Eve: | 09:00 – 16:00 |
New Year's Day: | Closed |
[open regular=false start=0 end=45 notes=false]
Christmas Eve: | 09:00 – 14:00 |
---|---|
Christmas Day: | Closed |
Boxing Day: | 12:00 – 18:00 |
New Year's Eve: | 09:00 – 16:00 |
New Year's Day: | Closed |
[open regular=false start=0 end=45 notes="replace closed"]
Christmas Eve: | 09:00 – 14:00 |
---|---|
Christmas Day: | Closed |
Boxing Day: | 12:00 – 18:00 |
New Year's Eve: | 09:00 – 16:00 |
New Year's Day: | Closed |
[open regular=false start=0 end=45 note_affixes="(|)"]
Christmas Eve: | 09:00 – 14:00 |
---|---|
Christmas Day: | Closed |
Boxing Day: | 12:00 – 18:00 (Sale Day!) |
New Year's Eve: | 09:00 – 16:00 |
New Year's Day: | Closed |
[open regular=false start=0 end=45 notes="prefix" note_affixes="| : "]
Christmas Eve: | 09:00 – 14:00 |
---|---|
Christmas Day: | Closed |
Boxing Day: | Sale Day! : 12:00 – 18:00 |
New Year's Eve: | 09:00 – 16:00 |
New Year's Day: | Closed |
Styling of these notes is possible using CSS selectors, such as these:
.opening-hours .note-only .hours { color: #D61D5B; } .opening-hours .note.prefix { color: #257BCB; }
All examples in this section are manipulated to show a set of special opening hours in December and January.
The time right now
What is the time right now?
<p class="open-text">[open_text]%now%[/open_text]</p>
13:57
As this is simply text, this shortcode and its content exists within a standard paragraph block rather than in a shortcode block.
If you are experiencing problems with out-dated versions of your page, please start with this shortcode to identify the issue with either your cache or the incorrect timezone.
This website is running on the timezone: Europe/London so it is either GMT (GMT+0) or BST (GMT+1).
Replacement text and logic
You can do a lot with replacement text and logic!
<p class="open-text">[open_text] %if_open_now% We are currently open, so pop in! %end% %if_open_later% We are currently not open, but we will be open today at: %today_next%. %end% %if_closed_now% %if_not_open_later% We are currently not open for the remainder of the day %if_open_tomorrow%, however we are open tomorrow at %tomorrow_start%. %else% %space%and closed tomorrow. %end% %end% %end% [/open_text]</p>
We are currently open, so pop in!
Additional spacing is added for readability. When processed, spaces before and after logic statements are removed.
Replacement text reference
There is plenty of text to play around with… here is a complete list of all the text replacement codes, their current values and a description.
Code | Value | Description |
---|---|---|
%now% | 13:57 | Formatted current time |
%hours_today% | 09:00 – 18:00 | Formatted list of hours for today |
%hours_tomorrow% | 09:00 – 18:00 | Formatted list of hours for tomorrow |
%today_start% | 09:00 | Formatted opening for today |
%today_end% | 18:00 | Formatted last closing time for today |
%today_next% | 18:00 | Formatted next opening or closing time today |
%today_1% | 09:00 – 18:00 | Formatted times for the first set of opening hours today |
%today_2% | Formatted times for the second set of opening hours today | |
%today_3% | Formatted times for the third set of opening hours today | |
%tomorrow_1% | 09:00 – 18:00 | Formatted times for the first set of opening hours tomorrow |
%tomorrow_2% | Formatted times for the second set of opening hours tomorrow | |
%tomorrow_3% | Formatted times for the third set of opening hours tomorrow | |
%today% | Wednesday | Today’s day name |
%tomorrow% | Thursday | Tomorrow’s day name |
%tomorrow_start% | 09:00 | Formatted first opening time for tomorrow |
%tomorrow_end% | 18:00 | Formatted closing time for tomorrow |
%closure_start% | Formatted start date for a temporary closure, use %closure_start {format: Y/m/d}% to apply your own formatting |
|
%closure_end% | Formatted end date for a temporary closure, use %closure_end {format: Y/m/d}% to apply your own formatting |
|
%seconds% | 14575 | Seconds until either change in opening or closing status |
%seconds_padded% | 14575 | Seconds with 2-digit padding for remaining time for change in opening or closing status |
%seconds_divisor% | 55 | Seconds as a divisor until either change in opening or closing status — useful when displayed with minutes |
%seconds_divisor_padded% | 55 | Seconds as a divisor with 2-digit padding for remaining time for change in opening or closing status — useful when displayed with minutes |
%minutes% | 242 | Minutes until either change in opening or closing status |
%minutes_padded% | 242 | Minutes with 2-digit padding for remaining time for change in opening or closing status |
%minutes_divisor% | 2 | Minutes as a divisor until either change in opening or closing status — useful when displayed with hours |
%minutes_divisor_padded% | 02 | Minutes as a divisor with 2-digit padding for remaining time for change in opening or closing status — useful when displayed with hours |
%hours% | 4 | Hours until either change in opening or closing status |
%hours_padded% | 04 | Hours with 2-digit padding for remaining time for change in opening or closing status |
%days% | 0 | Days until either change in opening or closing status |
%space% | Space character | |
%comma% | , | Comma character |
%colon% | : | Colon character |
%semicolon% | ; | Semi-colon character |
%exclamation% | ! | Exclamation mark character |
%question% | ? | Question mark character |
%fullstop% | . | Fullstop/period character |
%percent% | % | Percent character |