Vladimir Grba

ACF custom block shows preview image in Gutenberg

  1. Add callback function:

2. Add example and image

3. Make callback function

Pagination with Gallery field – Advanced Custom Fields

If you work a lot with WordPress, I’m sure you are familiar with the plugin Advanced Custom Fields (ACF). If not, you better go check it out, as this is absolutely one of the best plugins out there. With the PRO version you can use repeater, gallery and flexible content field. Woohoo!

Repeater field and gallery field, are really awesome. There is one thing tho – there is no pagination for that. But don’t worry, as there is a solution for that!

Pagination for gallery field

The pagination for gallery and repeater are a bit different, so I will start with the solution for gallery field. First thing you need to know – even tho pagination will not be generated by some magic function in WP – if you add “number” to the end of the url, you can get current pagination number with “get_query_var(‘paged’)“. Simple as that. And for pagination you can use WP function paginate_links.

Here is full code:

In case you want just “load more” button, instead of “paginate_links” you could do something like that:

For the next/prev buttons only:

Source: Codebusters

Convert hex to rgb or rgba color using PHP

As far as we know, many of WordPress theme developers use a lot of design options inside their themes, just as we do. Which means that you usually provide color pickers so the users may easily change color settings for their websites.

This usually means that you will need to create dynamic CSS files instead of a hard-coded CSS, so the user’s color changes may apply on the website instantly. As for HTML5/CSS3 standards, hex colors can’t always do all the work so you need to work with RGB or RGBA color codes.

While have been struggling with this sometimes, we have made a little helper function which converts hex color code string into RGB or even RGBA color, for example if you want to add opacity to some element color and basically achieve “transparent hex code”.

Hex to rgba converter php function

Here’s the code:

So far so good! Now we are going to show you how this function can be helpful whilst creating dynamic CSS with a simple example below.

Usage example:

Source: Mekshq

Advanced Custom Fields – Google Maps API settings

Google have introduced new changes to their API requests as of June 22nd, 2016. These changes restrict the number of website’s allowed to use their free map API services.

You will find a short statement from Google listing the changes here: http://googlegeodevelopers.blogspot.com.au/2016/06/building-for-scale-updates-to-google.html

What does this mean for me?

This means you may need to register a google API key in order to load a Google Map field both on the back-end (when editing a post) and on the front-end (when rendering a map).

Updates will be made to both ACF (v4) and ACF PRO (v5) allowing a Google API key to be registered.

It may be necessary to register a Google API key in order to allow the Google API to load correctly. Please follow this link to get a Google API key.

How to register an API key

The Google Map field documentation has been updated to include the following instructions.

It may be necessary to register a Google API key in order to allow the Google API to load correctly. Please follow this link to get a Google API key.

To register your Google API key, please use the ‘acf/fields/google_map/api’ filter like so:

If using ACF PRO, you may find it easier to update the ‘google_api_key’ setting instead:

Source: ACF Blog

How to create custom reset or forget password in wordpress

Many Personal, Blog and or even Business sites that are now running in WordPress platform, the easy and customizable CMS today and when the site goes larger, ineluctable it need custom functionality like Create Custom Reset/Forget Password, Update Profile where user can update their personal information without accessing admin panel and in this tutorial I would like to share you how we can achieve Forgot/reset password functionality using built-in WP functions, it’s very simple just follow the step by step process below.

PHP code

This contains PHP script to update user password and send email containing new password if successful.

This contains simple HTML form code where we put our new password for reset.

Page Template

Below is the complete custom reset password source code you can try just copy and paste the snippet below to try it yourself.

To those who didn’t know yet how to create custom page template visit WP Codex for complete and detailed tutorial.

Useful links:

Source: Sutana Ryan