Lovely – Soft Pink Floral Photoshop

Lovely website template

Today we have a new Photoshop Template up for sale: Lovely is a soft pink and floral template featuring a long design, circle photos and banner flags buttons, with large clear images used in the blog & shop layouts. If you are looking for a pretty template to get your feminine website started this is it.

This design would suit any womens website, interior design, personal blog, children, baby, wedding, fashion, lifestyle, wellness, health, or florist.

Pages included:

  • Home
  • Shop
  • Blog
  • Contact

Created: 3 March 17
Price: $12

Dynamic WordPress WP_Widget generator

Here is an example of generating multiple WP_Widget instances from an array.

This is available from WP 4.6.0 when it became possible to pass an instance of WP_Widget into register_widget();

Here is the sample widget array config:

 

And here are the generated widgets:

 

 

Code over here: https://github.com/dtbaker/dynamic-wordpress-widgets

Automatic Visual Regression Testing on WordPress Themes

So the other day I discovered a plugin update broke one of my theme demo websites. The layout on this particular demo page was probably broken for a good week.

How can I stop this happening again? Automatic Visual Regression Testing!

This basically means “take screenshots of web pages and report any visual differences”. Cool hey!

Now there’s a bucket of tools out there to help you do this.

  • browserstack
  • selenium
  • wraith
  • nightwatchjs
  • backstopjs
  • screener.io
  • shoov
  • and many more

Well I tried a few and ended up using NighwatchJS with Selenuim and the chrome/gecko drivers.  I really wanted to use browserstack for the cross platform factor, however couldn’t easily access full page screenshots via their API. Hopefully that becomes easier down the track.

Here’s the end result, it integrated into my theme development pipeline quite nicely.

1) Nightwatch will tell Selenuim to spin up a bunch of headless browsers in Xvfb at various resolutions and capture the output. Here we’re capturing 9 pages on the demo website at 3 different resolutions:

 

2) When it runs again it will detect any visual changes and flag them for review. Here it is highlighting background graphic changes and some text changes half way down the second page:

 

3) Script Output:

 

4) Test configuration:

{
  "urls": {
    "https://verge-blog-demo.themes.dtbaker.net": {
      "/": "Home",
      "/sample-page-2/": "Pages",
      "/about/": "About",
      "/shop/": "Shop",
      "/product/faux-plant-brushy/": "Product",
      "/blog/": "Blog",
      "/2017/01/15/outdoor-photography/": "Post",
      "/contact/": "Contact",
      "/category/interior-design/": "Category"
    }
  }
}

 

The code will land up on github once I’ve cleaned it up a bit more.

Our ‘Beautiful’ Theme Chosen for Managed Hosting Trial

So lucky to be one of only twelve WordPress themes selected for a new service provided by ThemeForest.  You can now have Envato, install, setup and host ANY of our WordPress themes for you. They will provide all the support and backups of your website.

Envato Hosted is great service for beginners who aren’t sure where to begin. Once your new website is setup you can jump into WordPress and start editing.

Get Envato Hosted. Only $19 per month

Included with your Envato Hosted plan

  • Instant setup of your WordPress theme, hosting and domain name
  • Ongoing support for your new site
  • Free migration if you have an existing site
  • Fully managed and secured WordPress hosting. We’ll handle WordPress core upgrades, provide base level security, monitor your site for errors, back up the site daily, and more.
  • Run on Amazon AWS infrastructure with 99.9% uptime
  • Included in your plan are 100,000 monthly visits, 5GB of disk space, and 100GB of monthly bandwidth.

Choose your hosted WordPress theme and start your 7-day free trial today.

Leafy Minimal Blog – Simplistic WordPress Blogger Theme

Leafy is a really cool and natural theme with a range of “Leafy” headers available, from light green blurry leaves, gum leaves, autumn leaves even palm leaves. This theme would suit a range of businesses or blogs.

This theme was created with ease of use in mind. Everything from the 5-minute setup Wizard through to the powerful page builder has been designed with the end user in mind. Perfect for beginners to make powerful changes, and perfect for more advanced users with a clean and simple backend code structure. All the graphics, fonts and photos are included, there is nothing else to buy.

Features:

  • WooCommerce Shop – Ready to run your online shop, complete control to sell anything.
  • Step by Step Installer – the easiest WordPress theme to install and setup.
  • Simple Admin – Straight forward options to customise your website.
  • Visual Editor – Drag & drop Elements around the page to customise your content.
  • Easy Sidebars – Control the position of the sidebar widgets on each page.
  • Font Control – Select from hundreds of Google fonts to customise your website.
  • Custom Headers – Select a pre-designed header or upload your own.
  • Documentation – detailed support documents and videos to help get your started.

Leafy WordPress theme is available for sale now for just $49.

Check out the Live Demo & Test the theme editor here.

jQuery Timepicker with unix epoch

The jQuery UI Timepicker is pretty cool. Adds a nice little time selector under the existing jQuery Date Picker calendar.

I needed to read/write timestamps from fields like this:

<input type="text" name="something" class="date_time" value="1477569840">

So I came up with this simple solution:

$('.date_time').each(function(){
    // create a new hidden field for our epoch time storage.
    // copy the name of this field over to the hidden field.
    $thistxt = $(this);
    var currenttime = $thistxt.val();
    $hidden = $('<input/>').attr('type','hidden').attr('name',$thistxt.attr('name')).val( $thistxt.val() );
    $thistxt.attr('name','ignore').after($hidden);
    $thistxt.datetimepicker({
        timeFormat: ucm.settings.time_picker_format,
        timeInput: true,
        controlType: 'select',
        parse: 'loose',
        onSelect: function( datetimeText, datepickerInstance ){
            if(typeof datepickerInstance.hour != 'undefined') {
                var time = datepickerInstance.hour + datepickerInstance.second;
                var date = datepickerInstance['$input'].datepicker("getDate");
                var timestamp = Math.round(new Date(date).getTime()/1000);
                // console.log(timestamp);
                $hidden.val(timestamp);
            }
        }
    });
    if(parseInt(currenttime) > 0) {
        var newtime = new Date(currenttime * 1000);
        $thistxt.datepicker('setTime', newtime);
        $thistxt.datepicker('setDate', newtime);
    }
});

The result is below. I use this in the Ultimate Client Manager.

 

WordFence blocking 3rd party PHP scripts

Ok so this was a mind bender.

Installed WordFence in the main website. Works great.

Went to use a completely different PHP script that was hosted on a different subdomain.

Nope! WordFence firewall popped up blocking the action (I was submitting a form with some URLs in it)

What the hell? How does a WordPress plugin on a separate subdomain block access to my non-WordPress PHP script?

Mind bender:

wordfence-blocked

 

After much .htaccess and folder renaming, a grep through the code led me to the php_value “auto_prepend_file”

Yep WordFence created a file .user.ini in my root folder with this content in it:

; Wordfence WAF
auto_prepend_file = '/web/site.net/public/wordfence-waf.php'
; END Wordfence WAF

So now all my non-WordPress PHP scripts are loading the WordFence firewall.

Kinda cool that it still works, but also kinda annoying.

 

The fix was to remove the .user.ini file and set this php_value via .htaccess so it only applies to my WordPress installation.