Blog - Vladimir Grba

Pagination with Gallery field – Advanced Custom Fields

grbavlad | December 13, 2017

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:

/**
 * Setup pagination variables
 */

/**
 * Get our gallery
 */
$gallery = get_field( 'gallery' );
/**
 * Set images array for current page
 */
$images = array();

/**
 * How many items we should display on each page
 */
$items_per_page  = 12;
/**
 * How many items we have in total
 */
$total_items = count( $gallery );
/**
 * How many pages we have in total
 */
$total_pages = ceil( $total_items / $items_per_page );
/**
 * Get current page
 */
if ( get_query_var( 'paged' ) ) {
	$current_page = get_query_var( 'paged' );
} elseif ( get_query_var( 'page' ) ) {
        /**
         * This is just in case some odd rewrite, but paged should work instead of page here
         */
	$current_page = get_query_var( 'page' );
} else {
	$current_page = 1;
}
/**
 * Get starting point for current page
 */
$starting_point = ( ( $current_page - 1 ) * $items_per_page );

/**
 * Get elements for current page
 */
if( $gallery ) {
	$images = array_slice( $gallery, $starting_point, $items_per_page );
}

if( ! empty( $images ) ) {
        /**
         * Your gallery loop here
         */
}

/**
 * And our pagination
 */
$big = 999999999; // need an unlikely integer
echo paginate_links(array(
	'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
	'format' => '?paged=%#%',
	'current' => $current_page,
	'total' => $total_pages,
	'before_page_number' => '<span class="screen-reader-text">' . __( 'Page ', 'textdomain' ) . ' </span>'
));

/**

* Setup pagination variables

/**

* Get our gallery

$gallery = get_field( 'gallery' );

/**

* Set images array for current page

$images = array();

/**

* How many items we should display on each page

$items_per_page = 12;

/**

* How many items we have in total

$total_items = count( $gallery );

/**

* How many pages we have in total

$total_pages = ceil( $total_items / $items_per_page );

/**

* Get current page

if ( get_query_var( 'paged' ) ) {

$current_page = get_query_var( 'paged' );

} elseif ( get_query_var( 'page' ) ) {

/**

* This is just in case some odd rewrite, but paged should work instead of page here

$current_page = get_query_var( 'page' );

} else {

$current_page = 1;

}

/**

* Get starting point for current page

$starting_point = ( ( $current_page - 1 ) * $items_per_page );

/**

* Get elements for current page

if( $gallery ) {

$images = array_slice( $gallery, $starting_point, $items_per_page );

}

if( ! empty( $images ) ) {

/**

* Your gallery loop here

}

/**

* And our pagination

$big = 999999999; // need an unlikely integer

echo paginate_links(array(

'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),

'format' => '?paged=%#%',

'current' => $current_page,

'total' => $total_pages,

'before_page_number' => '<span class="screen-reader-text">' . __( 'Page ', 'textdomain' ) . ' </span>'

));

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

if( $total_pages > 1 && $current_page < $total_pages ) {
	echo '<a href="' . get_permalink() . 'page/' . ( $current_page + 1 ).'/">' . __( 'Load more', 'textdomain' ) . '</a>';
}

if( $total_pages > 1 && $current_page < $total_pages ) {

echo '<a href="' . get_permalink() . 'page/' . ( $current_page + 1 ).'/">' . __( 'Load more', 'textdomain' ) . '</a>';

}

For the next/prev buttons only:

/**
 * Set previous page
 */
if ( $total_pages > 1 && $current_page <= $total_pages && $current_page != 1 ) {
	echo '<a href="' . get_permalink() . ( ( $current_page - 1 ) != 1 ? 'page/' . ( $current_page - 1 ) . '/' : '' ) . '">' . __( 'Previous', 'textdomain' ) . '</a>';
}

/**
 * Set next page
 */
if($total_pages>1 && $current_page<$total_pages && $current_page!=$total_pages) {
	echo '<a href="' . get_permalink() . 'page/' . ( $current_page + 1 ) . '/">' . __( 'Next', 'textdomain' ) . '</a>';
}

/**

* Set previous page

if ( $total_pages > 1 && $current_page <= $total_pages && $current_page != 1 ) {

echo '<a href="' . get_permalink() . ( ( $current_page - 1 ) != 1 ? 'page/' . ( $current_page - 1 ) . '/' : '' ) . '">' . __( 'Previous', 'textdomain' ) . '</a>';

}

/**

* Set next page

if($total_pages>1 && $current_page<$total_pages && $current_page!=$total_pages) {

echo '<a href="' . get_permalink() . 'page/' . ( $current_page + 1 ) . '/">' . __( 'Next', 'textdomain' ) . '</a>';

}

Source: Codebusters

Convert hex to rgb or rgba color using PHP

grbavlad | October 13, 2017

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:

/**
 * Convert hexdec color string to rgb(a) string
 *
 * If we want make opacity, we have to convert hexadecimal into rgb(a), because wordpress customizer give to us hexadecimal colour
 * @link https://mekshq.com/how-to-convert-hexadecimal-color-code-to-rgb-or-rgba-using-php/
 */
 
function hex2rgba( $color, $opacity = false ) {
 
	$default = 'rgb( 0, 0, 0 )';
 
	/**
	 * Return default if no color provided
	 */
	if( empty( $color ) ) {

        return $default; 
	
	}
 
	/**
	 * Sanitize $color if "#" is provided
	 */
    if ( $color[0] == '#' ) {

    	$color = substr( $color, 1 );

    }

    /**
     * Check if color has 6 or 3 characters and get values
     */
    if ( strlen($color) == 6 ) {

        $hex = array( $color[0] . $color[1], $color[2] . $color[3], $color[4] . $color[5] );

    } elseif ( strlen( $color ) == 3 ) {

        $hex = array( $color[0] . $color[0], $color[1] . $color[1], $color[2] . $color[2] );

    } else {

        return $default;

    }

    /**
     * [$rgb description]
     * @var array
     */
    $rgb =  array_map( 'hexdec', $hex );

    /**
     * Check if opacity is set(rgba or rgb)
     */
    if( $opacity ) {

    	if( abs( $opacity ) > 1 )

    	$opacity = 1.0;

    	$output = 'rgba( ' . implode( "," ,$rgb ) . ',' . $opacity . ' )';

    } else {

    	$output = 'rgb( ' . implode( "," , $rgb ) . ' )';
    	
    }

    /**
     * Return rgb(a) color string
     */
    return $output;
}

/**

* Convert hexdec color string to rgb(a) string

* If we want make opacity, we have to convert hexadecimal into rgb(a), because wordpress customizer give to us hexadecimal colour

* @link https://mekshq.com/how-to-convert-hexadecimal-color-code-to-rgb-or-rgba-using-php/

function hex2rgba( $color, $opacity = false ) {

$default = 'rgb( 0, 0, 0 )';

/**

* Return default if no color provided

if( empty( $color ) ) {

return $default;

}

/**

* Sanitize $color if "#" is provided

if ( $color[0] == '#' ) {

$color = substr( $color, 1 );

}

/**

* Check if color has 6 or 3 characters and get values

if ( strlen($color) == 6 ) {

$hex = array( $color[0] . $color[1], $color[2] . $color[3], $color[4] . $color[5] );

} elseif ( strlen( $color ) == 3 ) {

$hex = array( $color[0] . $color[0], $color[1] . $color[1], $color[2] . $color[2] );

} else {

return $default;

}

/**

* [$rgb description]

* @var array

$rgb = array_map( 'hexdec', $hex );

/**

* Check if opacity is set(rgba or rgb)

if( $opacity ) {

if( abs( $opacity ) > 1 )

$opacity = 1.0;

$output = 'rgba( ' . implode( "," ,$rgb ) . ',' . $opacity . ' )';

} else {

$output = 'rgb( ' . implode( "," , $rgb ) . ' )';

}

/**

* Return rgb(a) color string

return $output;

}

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:

/**
 * Here's a usage example how to use this function for dynamicaly created CSS
 */
 
$color = '#ffa226';
$rgb = hex2rgba( $color );
$rgba = hex2rgba( $color, 0.7 );
 
/**
 * CSS output
 */
 
echo '	
	div.example{
		background: ' . $rgb . ';
		color: ' . $rgba . ';
	}
';

/**

* Here's a usage example how to use this function for dynamicaly created CSS

$color = '#ffa226';

$rgb = hex2rgba( $color );

$rgba = hex2rgba( $color, 0.7 );

/**

* CSS output

echo '

div.example{

background: ' . $rgb . ';

color: ' . $rgba . ';

}

Source: Mekshq

Advanced Custom Fields – Google Maps API settings

grbavlad | May 4, 2017

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:

function my_acf_google_map_api( $api ){
	
	$api['key'] = 'xxx';
	
	return $api;
	
}

add_filter('acf/fields/google_map/api', 'my_acf_google_map_api');

function my_acf_google_map_api( $api ){

$api['key'] = 'xxx';

return $api;

}

add_filter('acf/fields/google_map/api', 'my_acf_google_map_api');

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

function my_acf_init() {
	
	acf_update_setting('google_api_key', 'xxx');
}

add_action('acf/init', 'my_acf_init');

function my_acf_init() {

acf_update_setting('google_api_key', 'xxx');

}

add_action('acf/init', 'my_acf_init');

Source: ACF Blog

How to create custom reset or forget password in wordpress

grbavlad | May 4, 2017

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.

<?php
	global $wpdb;
	
	$error = '';
	$success = '';
	
	// check if we're in reset form
	if( isset( $_POST['action'] ) && 'reset' == $_POST['action'] ) 
	{
		$email = trim($_POST['user_login']);
		
		if( empty( $email ) ) {
			$error = 'Enter a username or e-mail address..';
		} else if( ! is_email( $email )) {
			$error = 'Invalid username or e-mail address.';
		} else if( ! email_exists($email) ) {
			$error = 'There is no user registered with that email address.';
		} else {
		
			// lets generate our new password
			$random_password = wp_generate_password( 12, false );
			
			// Get user data by field and data, other field are ID, slug, slug and login
			$user = get_user_by( 'email', $email );
			
			$update_user = wp_update_user( array (
					'ID' => $user->ID, 
					'user_pass' => $random_password
				)
			);
			
			// if  update user return true then lets send user an email containing the new password
			if( $update_user ) {
				$to = $email;
				$subject = 'Your new password';
				$sender = get_option('name');
				
				$message = 'Your new password is: '.$random_password;
				
				$headers[] = 'MIME-Version: 1.0' . "\r\n";
				$headers[] = 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
				$headers[] = "X-Mailer: PHP \r\n";
				$headers[] = 'From: '.$sender.' < '.$email.'>' . "\r\n";
				
				$mail = wp_mail( $to, $subject, $message, $headers );
				if( $mail )
					$success = 'Check your email address for you new password.';
					
			} else {
				$error = 'Oops something went wrong updaing your account.';
			}
 
		}
		
		if( ! empty( $error ) )
			echo '<div class="error_login"><strong>ERROR:</strong> '. $error .'</div>';
		
		if( ! empty( $success ) )
			echo '<div class="updated"> '. $success .'</div>';
	}
?>

<?php

global $wpdb;

$error = '';

$success = '';

// check if we're in reset form

if( isset( $_POST['action'] ) && 'reset' == $_POST['action'] )

{

$email = trim($_POST['user_login']);

if( empty( $email ) ) {

$error = 'Enter a username or e-mail address..';

} else if( ! is_email( $email )) {

$error = 'Invalid username or e-mail address.';

} else if( ! email_exists($email) ) {

$error = 'There is no user registered with that email address.';

} else {

// lets generate our new password

$random_password = wp_generate_password( 12, false );

// Get user data by field and data, other field are ID, slug, slug and login

$user = get_user_by( 'email', $email );

$update_user = wp_update_user( array (

'ID' => $user->ID,

'user_pass' => $random_password

)

);

// if update user return true then lets send user an email containing the new password

if( $update_user ) {

$to = $email;

$subject = 'Your new password';

$sender = get_option('name');

$message = 'Your new password is: '.$random_password;

$headers[] = 'MIME-Version: 1.0' . "\r\n";

$headers[] = 'Content-type: text/html; charset=iso-8859-1' . "\r\n";

$headers[] = "X-Mailer: PHP \r\n";

$headers[] = 'From: '.$sender.' < '.$email.'>' . "\r\n";

$mail = wp_mail( $to, $subject, $message, $headers );

if( $mail )

$success = 'Check your email address for you new password.';

} else {

$error = 'Oops something went wrong updaing your account.';

}

if( ! empty( $error ) )

echo '<div class="error_login"><strong>ERROR:</strong> '. $error .'</div>';

if( ! empty( $success ) )

echo '<div class="updated"> '. $success .'</div>';

}

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

<form method="post">
	<fieldset>
		<p>Please enter your username or email address. You will receive a link to create a new password via email.</p>
		<p><label for="user_login">Username or E-mail:</label>
			<?php $user_login = isset( $_POST['user_login'] ) ? $_POST['user_login'] : ''; ?>
			<input type="text" name="user_login" id="user_login" value="<?php echo $user_login; ?>" /></p>
		<p>
			<input type="hidden" name="action" value="reset" />
			<input type="submit" value="Get New Password" class="button" id="submit" />
		</p>
	</fieldset> 
</form>

<p>Please enter your username or email address. You will receive a link to create a new password via email.</p>

<p><label for="user_login">Username or E-mail:</label>

<?php $user_login = isset( $_POST['user_login'] ) ? $_POST['user_login'] : ''; ?>

<p>

</p>

</fieldset>

</form>

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.

<?php  
/* 
Template Name: Reset Page
*/
 
get_header();
?>
<div class="wrapper">
	
	<?php
		global $wpdb;
		
		$error = '';
		$success = '';
		
		// check if we're in reset form
		if( isset( $_POST['action'] ) && 'reset' == $_POST['action'] ) 
		{
			$email = trim($_POST['user_login']);
			
			if( empty( $email ) ) {
				$error = 'Enter a username or e-mail address..';
			} else if( ! is_email( $email )) {
				$error = 'Invalid username or e-mail address.';
			} else if( ! email_exists( $email ) ) {
				$error = 'There is no user registered with that email address.';
			} else {
				
				$random_password = wp_generate_password( 12, false );
				$user = get_user_by( 'email', $email );
				
				$update_user = wp_update_user( array (
						'ID' => $user->ID, 
						'user_pass' => $random_password
					)
				);
				
				// if  update user return true then lets send user an email containing the new password
				if( $update_user ) {
					$to = $email;
					$subject = 'Your new password';
					$sender = get_option('name');
					
					$message = 'Your new password is: '.$random_password;
					
					$headers[] = 'MIME-Version: 1.0' . "\r\n";
					$headers[] = 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
					$headers[] = "X-Mailer: PHP \r\n";
					$headers[] = 'From: '.$sender.' < '.$email.'>' . "\r\n";
					
					$mail = wp_mail( $to, $subject, $message, $headers );
					if( $mail )
						$success = 'Check your email address for you new password.';
						
				} else {
					$error = 'Oops something went wrong updaing your account.';
				}
				
			}
			
			if( ! empty( $error ) )
				echo '<div class="message"><p class="error"><strong>ERROR:</strong> '. $error .'</p></div>';
			
			if( ! empty( $success ) )
				echo '<div class="error_login"><p class="success">'. $success .'</p></div>';
		}
	?>
 
	<!--html code-->
	<form method="post">
		<fieldset>
			<p>Please enter your username or email address. You will receive a link to create a new password via email.</p>
			<p><label for="user_login">Username or E-mail:</label>
				<?php $user_login = isset( $_POST['user_login'] ) ? $_POST['user_login'] : ''; ?>
				<input type="text" name="user_login" id="user_login" value="<?php echo $user_login; ?>" /></p>
			<p>
				<input type="hidden" name="action" value="reset" />
				<input type="submit" value="Get New Password" class="button" id="submit" />
			</p>
		</fieldset> 
	</form>
</div>
 
<?php get_footer(); ?>

<?php

Template Name: Reset Page

get_header();

<?php

global $wpdb;

$error = '';

$success = '';

// check if we're in reset form

if( isset( $_POST['action'] ) && 'reset' == $_POST['action'] )

{

$email = trim($_POST['user_login']);

if( empty( $email ) ) {

$error = 'Enter a username or e-mail address..';

} else if( ! is_email( $email )) {

$error = 'Invalid username or e-mail address.';

} else if( ! email_exists( $email ) ) {

$error = 'There is no user registered with that email address.';

} else {

$random_password = wp_generate_password( 12, false );

$user = get_user_by( 'email', $email );

$update_user = wp_update_user( array (

'ID' => $user->ID,

'user_pass' => $random_password

)

);

// if update user return true then lets send user an email containing the new password

if( $update_user ) {

$to = $email;

$subject = 'Your new password';

$sender = get_option('name');

$message = 'Your new password is: '.$random_password;

$headers[] = 'MIME-Version: 1.0' . "\r\n";

$headers[] = 'Content-type: text/html; charset=iso-8859-1' . "\r\n";

$headers[] = "X-Mailer: PHP \r\n";

$headers[] = 'From: '.$sender.' < '.$email.'>' . "\r\n";

$mail = wp_mail( $to, $subject, $message, $headers );

if( $mail )

$success = 'Check your email address for you new password.';

} else {

$error = 'Oops something went wrong updaing your account.';

}

if( ! empty( $error ) )

echo '<div class="message"><p class="error"><strong>ERROR:</strong> '. $error .'</p></div>';

if( ! empty( $success ) )

echo '<div class="error_login"><p class="success">'. $success .'</p></div>';

}

<p>Please enter your username or email address. You will receive a link to create a new password via email.</p>

<p><label for="user_login">Username or E-mail:</label>

<?php $user_login = isset( $_POST['user_login'] ) ? $_POST['user_login'] : ''; ?>

<p>

</p>

</fieldset>

</form>

</div>

<?php get_footer(); ?>

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

M	T	W	T	F	S	S
« Dec
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31

Vladimir Grba

Pagination with Gallery field – Advanced Custom Fields

Pagination for gallery field

Convert hex to rgb or rgba color using PHP

Hex to rgba converter php function

Advanced Custom Fields – Google Maps API settings

What does this mean for me?

How to register an API key

How to create custom reset or forget password in wordpress

PHP code

Page Template

Latest Posts

Categories

Calendar

Pagination for gallery field

Share

Hex to rgba converter php function

Share

What does this mean for me?

How to register an API key

Share

PHP code

Page Template

Share

Latest Posts

Categories

Calendar

Cookies