Sulby Theme Slider

February 23, 2018

#CSS #JavaScript #jQuery #JSON #PHP #Shortcode API #Sulby Theme #WordPress


I built this simple slider for my standalone "Sulby" WordPress theme. Written in PHP and JavaScript with jQuery + CSS defining the layout, responsiveness etc. The code is below.

In several past projects we used a well known third-party slider. Now I wanted something more minimal, lightweight and extensible. If we want to change the look and feel then we can do that that in CSS. If we want different functionality then let’s do it in the code. It’s much simpler than trying to work out how to achieve a result via a convoluted plugin interface or restrictive settings.

The PHP creates a WordPress Shortcode. The WordPress Shortcode API can be used to create macros which can be added to a Post or a Page – or to a PHP template using the do_shortcode() function. Eg the slider shown here is added like this:

[insertSulbySlider images=1005,992,1003,1002,993 message-title="Slider Demo" message-body="stock images from my legacy portfolio at Getty Images & iStockPhoto" slider-caption="Bunhill / Getty Images" slider-caption-link="" delay=8 aspect-padding=56.25 header-bool=false]

The images are added by ID. The json_encode function sanitizes this input and then translates the data to a JSON string to be passed to a JavaScript function. The $custom_aspect variable allows me to specify the aspect ratio of the slider. The TL;DR:

eg – 100 = 1:1 / 75 = 4:3 / 66.66 = 3:2 / 56.25 = 16:9

We need to be able to specify the aspect ratio every time. The slider is a div background image but there is not currently a way in CSS to set height such that it is dynamically proportional to widthcalc only works with vw and vh. We could do it in Javascript but that would be clunky (the function would be repeatedly called as the user resized a browser window). Instead we set width to 100% and height to 0 (in the CSS). Then use padding-top as a percentage. The method is described here at

The $header_bool variable flags a specific exception – if the slider is at the top of the page then it wants to be approaching full height relative to the device or browser window – 79vh set in the JavaScript. This particularly matters on phones and the $custom_aspect variable is effectively ignored.

Each slider needs a unique #ID – because elements must be unique per page and potentially we may have more than one slider per page with different properties. That means naming them dynamically. PHP’s uniqid() is a perfectly adequate solution here.

Show Code

Sulby WordPress theme

December 15, 2017

#CSS #HTML5 #JavaScript #jQuery #LEMP #MySQL #NGINX #PHP #Redux Framework #Sulby Theme #WordPress

the naked brunch

Sulby is an in-house standalone WordPress theme developed by Designed and built from scratch to be lightweight, fast, secure and efficient, the theme is ideally suited to many typical small business and / or presentation requirements.

The theme works effectively on both phones and larger devices and can be quickly tailored and styled to a client specification. Written in PHP, jQuery, HTML5 and CSS all of the required functionality is included within the theme itself – rather than depending on additional or potentially insecure and poorly documented third-party plugins which may be poorly maintained over time. Total knowledge of everything included in the theme offers significant advantages with respect to quickly and effectively meeting specific client requirements. Deliberately stripped back and bare-bones, there is none of the superfluous bloat and legacy code often found in commercially available themes. The aim has been to include only what is actually required – to create a flexible framework into which additional specific functionality could then be added as required.

Sulby WordPress theme
Sulby WordPress theme

This site has been built using the theme and there is a more comprehensive demo at The Naked Brunch is an imaginary restaurant / café business with 3 branches. The site runs on a LEMP (Linux, Nginx, MySQL, PHP) stack and is hosted by at Digital Ocean. HTTPS (SSL/TLS) certificates are via Let’s Encrypt. In most cases this combination is also likely to be the best client hosting solution since the setup has been carefully optimized and tested. A site based on this theme and code base could however also be easily implemented on existing or alternative hosting elsewhere.

The theme incorporates the Redux Framework which enables us to quickly customize the use of typography – Google Fonts are available as standard enabling the look and feel of a site to be quickly changed (fig 1). Additionally the backend administration dashboard can be customized – such that, for example, functionality can be simplified for clients to include only what they actually need (fig 2). At the, for example, the client-user would need to be able to edit the restaurant menus and upload new pdfs (fig 3). In this example the ‘Restaurant Menu’ entity is a Custom Post Type defined in functions.php.

typography options
fig 1
client dashboard
fig 2
client dashboard
fig 3

Show All Posts