FIXED: iOS forces rounded corners and glare on inputs
|
1 2 3 4 5 |
input { -webkit-appearance: none; -webkit-border-radius:0; border-radius:0; } |
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:
|
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 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 |
/** * 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:
|
1 2 3 |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
/** * 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
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:
|
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 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 |
/** * 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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
/** * 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
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:
|
1 2 3 4 5 6 7 8 9 |
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:
|
1 2 3 4 5 6 |
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
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.
|
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 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
<?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.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<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> |
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.
|
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 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 |
<?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(); ?> |
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