DevSlider – A simple responsive slider built for Developers

There were many times when client asked me to customize the current slider template and add new settings to the slider. There are many great sliders in WordPress plugins repository, but they are not extendable – you can’t add new settings to the slider and change the template or it’s very hard. This time I decided to spend a bit more time and create my own slider which you can extend easily.

Simple WordPress slider for developers
WordPress slider front-end

It uses bxSlider jQuery library and a Custom Post Type for slides. bxSlider has many options and examples. You can filter out bxSlider options by using devslider_slider_js filter and change them.

How to add slider to your page?

Use [DevSlider] shortocde. Available options are: slidewidth (default: 0), minslides (default: 1), maxslides (default: 1), category (default: all or category slug).

How to change the slider template?

The template file of DevSlider contains the markup and template structure for the front-end. This template file can be found within the /devslider/inc/ directory.

You can edit this template in an upgrade safe way through overrides. Simply copy devslider-template.php to your theme folder.

How to add new settings?

There are two ways. You can use Advanced Custom Fields plugin or WordPress meta boxes.

If you are going to use ACF, then you need to tell that to DevSlider by using devslider_use_wp_meta_boxes filter.

If you are going to use WordPress metaboxes, then you need to add a new meta box by using devslider_slider_settings_metabox action hook. For example, I’ll add a new input field for slide text.

We also need to hook into devslider_save_slide action hook to save it.

Now in wp-content/themes/yourtheme/devslider-template.php you can use slide text. (If you don’t see this file in your theme, then you can .copy it from the plugin inc folder).

You are welcome to contribute to this slider on GitHub.

Available action hooks

  • devslider_loaded
  • before_devslider_init
  • after_devslider_init
  • devslider_enqueue_scripts
  • devslider_add_meta_boxes
  • devslider_slider_settings_metabox – available argument $post
  • devslider_save_slide – available argument $post_id

Available filters

  • devslider_slider_js – bxSlider JavaScript code
  • devslider_use_wp_meta_boxes – available argument bool – true or false

WooCommerce REST API – Import products from JSON

I had a task to create a PHP script to import simple and variable products from JSON file using the WooCommerce REST API. Thought it might be worth sharing with others because I couldn’t find much information about products import from JSON using the API.

To make it easier to understand, I created a simple JSON file with one simple product and one variable product that have two product variations. You can get all files from Github repository.

products.json

Getting started

What you need to do is download a PHP wrapper for the WooCommerce REST API. You can download it using composer from https://packagist.org/packages/automattic/woocommerce If you don’t have composer yet, then you can download it from https://getcomposer.org

Setup

Setup for the new WP REST API integration (WooCommerce 2.6 or later):

1. Parse JSON

Convert JSON string to PHP array.

2. Get all product attributes from JSON

We need to get all product attributes names and values from JSON file.

3. Get products and variations from JSON for importing

4. Merge products and product variations

Used to loop through products, then loop through product variations.

5. A simple function to print status message

Import products to WooCommerce using the API

You can find the script on Github repository

How to extend search for custom post types in WordPress admin

I recently had to extend the search to include custom fields in WordPress admin. I created a custom post type called “document” and a few custom fields such as “_file_name” and “_url”. Unfortunately, it’s not possible to search by custom field value in WordPress admin, so I had to hook into the native WordPress search and tweak it.

WordPress admin search

In order to change the search query, you need to hook into pre_get_posts action. The pre_get_posts action gives developers access to the $query object by reference (Read more at WordPress Codex).

WordPress admin search

Here’s the code. You can change $post_type and $custom_fields according your needs.

How to create a jQuery autocomplete drop down in WordPress

The autocompletion allows users to select from a pre-populated list of suggestions as they type. There are a number of jQuery autocomplete plugins. I’ll create an autocomplete from the post titles and redirect to a blog post based on selected option value. I’ll use jQuery UI autocomplete since it’s already included in WordPress. You can find demo: here.

Firstly, we need to enqueue jQuery UI and autocomplete libraries.

Secondly, we need to add a simple textbox in the front-end. I’ll attach jQuery UI autocomplete to it. I added a shortcode to output HTML text input field.

Also, add some CSS to make it nicer.

Autocomplete dropdown

Lastly, we need to enable autocomplete on our text input field and define the data to use. The datasource is a JavaScript array and you can define whatever you want – posts, pages, WooCommerce products, users and so on. If you have a lot of posts, then you should load a JSON file as source. Some useful links to documentation: option source, event select.

You can move JavaScript code to an external file.

Also, you can customize the select drop down with _renderItem method.

How to add custom product sorting options in WooCommerce

By default, WooCommerce comes with 6 sorting options:

  • Sort by popularity
  • Sort by average rating
  • Sort by newness
  • Sort by price: low to high
  • Sort by price: high to low

In this example, I’ll add an extra option to sort by sale status.

Adding a new sorting option

woocommerce_catalog_orderby hook gives you control over the default sorting options to display. In order to add a new option, you need to add it to the current options array.

Code:

Now add the following code to order by the _sale_price custom field.

Code:

Advanced sorting

However, if your sorting needs are more advanced, then you can hook into pre_get_posts instead of woocommerce_get_catalog_ordering_args.

The pre_get_posts hook gives developers access to the $query object and possibility to modify the query. It’s really powerful and useful for altering the main loop and creating custom queries. See the docs here.

In this example, we’ll show products from a given category ‘Cars’ and sort them by sale status.

Code:

How to prevent CSS caching and load the most recent version of a file after updating

When working with clients you need to make sure any CSS changes are loading and website is updated. Every time a browser loads a webpage it has to download a number of files, including CSS and JavaScript. A common solution is to use CSS versioning. Adding a version number to the CSS file will let the server know this is a new file. You can automatically version your CSS files by adding a last modified timestamp to the end of the file name like /css/style.css?ver=1469128847

A solution in WordPress:

Version number is a parameter of wp_enqueue_style().

Codex:

We’ll use the filemtime() function to return the last time the file content was modified.

Code:

Result: