How to add Pagination on an Advanced Custom Fields Repeater

Okay, so it goes without saying that the Advanced Custom Fields plugin is an amazing plugin, one in which we pretty much use on every website we build. It becomes even more powerful with the Repeater Field add-on. If you’re like us, then you probably already have the Advanced Customer Fields Pro version which we would highly recommend if you don’t own it already.

One request that we had was to add pagination since the repeater values grew much larger than expected. Today, we will show you a method to add pagination to the results when you display them to the user.

In the example below, we will paginate a Repeater image gallery which is mapped to a custom field name image_gallery which contains a subfield called image which is an image object. Our repeater will be displayed on a custom page template with the URL of /gallery.

In our example, ten images will be displayed per page, and pagination links will allow the user to navigate between the gallery’s pages at pretty URLs such as /gallery/2/, /gallery/3/ and so on. Right, so let’s get cracking!

In your page template:

PHP


<?php
/* 
 * Paginatation on Advanced Custom Fields Repeater
 */

if( get_query_var('page') ) {
    $page = get_query_var( 'page' );
} else {
    $page = 1;
}

// Variables
$row              = 0;
$images_per_page  = 10; // How many images to display on each page
$images           = get_field( 'image_gallery' );
$total            = count( $images );
$pages            = ceil( $total / $images_per_page );
$min              = ( ( $page * $images_per_page ) - $images_per_page ) + 1;
$max              = ( $min + $images_per_page ) - 1;

// ACF Loop
if( have_rows( 'image_gallery' ) ) : ?>

<?php while( have_rows( 'image_gallery' ) ): the_row();

    $row++;

    // Ignore this image if $row is lower than $min
    if($row < $min) { continue; }

    // Stop loop completely if $row is higher than $max
    if($row > $max) { break; } ?>

<?php $img_obj = get_sub_field( 'image' ); ?> < a href = "<?php echo $img_obj['sizes']['large']; ?>" >
    < img src = "<?php echo $img_obj['sizes']['thumbnail']; ?>"
alt = "" >
    < /a>

<?php endwhile;

  // Pagination
  echo paginate_links( array(
    'base' => get_permalink() . '%#%' . '/',
    'format' => '?page=%#%',
    'current' => $page,
    'total' => $pages
  ) );
  ?>

<?php else: ?>

No images found

    <?php endif; ?>

And there we have it, pretty simple huh? This technique will also work on Custom Post Type single templates. Your pagination permalinks will have the format /post-type/post-slug/2/.

Along with this, you will need to add some styling but we’ll assume your pretty capable with that part.

Did this help? Do you need any assistance getting this to work? Drop a comment below and we’ll be in touch!

 

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development and web site design. His expertise is WordPress & Magento as well as many other frameworks. Would you like to work with Nathan? Send him an email on [email protected]

It’s good to share

We’re Hiring! 1 x Freelance Web Developer

We are currently in need of a website developer to work with to complete ad-hoc jobs as required as we quite often we tend to get a work overload that we could do with some assistance in order to complete tasks in a timely manner. We always aim to deliver any type of project in a timely manner which is how we maintain long-term relationships with our clients.

Please only submit your application if you are competent in the following:-

  • Bespoke WordPress Theme Builds
  • Plugin Customisation
  • HTML5 / CSS3 / PHP / jQuery / JavaScript / SASS / SCSS
  • Bootstrap 4
  • Providing estimates and delivering on time
  • Developing Email Templates using MailChimp
  • Based in Europe*

 

Optional requirements but not essential:-

  • Magento
  • Shopify
  • Laravel
  • Various other frameworks as there tends to be a varied type of work.

 

Please submit your hourly rate and a list of your expertise within your application.

To get started, email your CV and Cover Letter to [email protected]

Thank you for reading, and we look forward to hearing from you!

 

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development and web site design. His expertise is WordPress & Magento as well as many other frameworks. Would you like to work with Nathan? Send him an email on [email protected]

It’s good to share

How to switch to a different PHP version?

So if you are wanting to upgrade the PHP version of your website, you have come to the right place.

This can usually be performed through your web hosting control panel (cPanel/Plesk), but for whatever reason, you don’t have access to this, you can actually update it via the .htaccess file.

Before proceeding, back up your .htaccess file or your entire website, just to be extra safe!

Also, if you’re doing this to permanently upgrade the PHP version of your WordPress website, find out if your web host, theme, and plugins support a higher version of PHP, such as 7+.

So the .htaccess file can be found in the root of your public domain, I’ll give you several handlers to add, but you should stick to PHP 7+ (7.3 currently recommended) because it’s faster and more secure!

So to perform the upgrade, add one of the below handlers right above the #BEGIN WordPress line in your .htaccess file:-

Change to PHP 7.3


AddHandler application/x-httpd-php73 .php

Change to PHP 7.2


AddHandler application/x-httpd-php72 .php

Change to PHP 7.1


AddHandler application/x-httpd-php71 .php

Change to PHP 7.0


AddHandler application/x-httpd-php70 .php

Change to PHP 5.6


AddHandler application/x-httpd-php56 .php

Change to PHP 5.5


AddHandler application/x-httpd-php55 .php

 

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development and web site design. His expertise is WordPress & Magento as well as many other frameworks. Would you like to work with Nathan? Send him an email on [email protected]

It’s good to share

How to create a PHP info page

You can use a phpinfo() page to view the current PHP information for your server.

This file outputs a large amount of information, such as:

  • Information about PHP compilation options and extensions
  • PHP version
  • Server information and environment (if compiled as a module)
  • PHP environment
  • OS version information, paths, master and local values of configuration options
  • HTTP headers
  • PHP license

Because every system is set up differently, phpinfo() is commonly used to check PHP configuration settings and for available predefined variables on your particular system.

phpinfo() is also a valuable debugging tool, as it contains all EGPCS (Environment, GET, POST, Cookie, and Server) data.

Creating the file

To create a phpinfo file, open a plain text file, add the following lines, and save; Filename: phpinfo.php


<?php

// Show all information, defaults to INFO_ALL
phpinfo();

?>

Upload the file to the server. You should upload your file to the exact directory you want to test. Typically, this will be your httpdocs (/var/www/vhosts/example.com/httpdocs/) directory, although you can upload it to any subdirectory on your server as well. Use FTP to upload the file.

Visit the page in your browser. If you uploaded it to your html directory, you should now visit http://www.example.com/phpinfo.php, replacing example.com with your own domain name.

Now you can view all of the information about PHP for your server for that particular directory.

 

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development and web site design. His expertise is WordPress & Magento as well as many other frameworks. Would you like to work with Nathan? Send him an email on [email protected]

It’s good to share

jQuery – Submitting a form with AJAX

To submit a form with AJAX (without reloading the page), you can use the ajaxForm/ajaxSubmit functions from Ajax Form Plugin or the jQuery serialize function.

AjaxForm:


$("#theForm").ajaxForm({url: 'server.php', type: 'post'})

or alternatively:-


$("#theForm").ajaxSubmit({url: 'server.php', type: 'post'})

ajaxForm will send when the submit button is pressed. ajaxSubmit sends immediately.

Serialize Method:


$.get('server.php?' + $('#theForm').serialize())

$.post('server.php', $('#theForm').serialize())

You can read the AJAX serialization documentation is here.

 

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development and web site design. His expertise is WordPress & Magento as well as many other frameworks. Would you like to work with Nathan? Send him an email on [email protected]

It’s good to share

How to find the full path to a file using PHP

Sometimes you need to know the full path to a file or directory, for example, if you want to setup .htaccess authentication you need to enter the full path to the .htpasswd file. If you dont know the full path and PHP is installed on the server, we will show you how you can find this information.

Below is a small PHP script that prints the full path to the directory it is placed in. Copy the code and paste it into a file called test.php. You can then upload the file to the directory where you want to place the .htpasswd. Then point your browser to http://www.your-domain.com/path/to/test.php


<?php
$dir = dirname(__FILE__);
echo "<p>Full path to this dir: " . $dir . "</p>";
echo "<p>Full path to a .htpasswd file in this dir: " . $dir . "/.htpasswd" . "</p>";
?>

 

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development and web site design. His expertise is WordPress & Magento as well as many other frameworks. Would you like to work with Nathan? Send him an email on [email protected]

It’s good to share

How To Create a WordPress Custom Page Template

What are custom WordPress templates?

WordPress custom page templates are theme files that provide an alternative to the default page.php file. These custom templates can contain whatever HTML and template tags you wish to build your desired layout or content, then the file can be attached to a specific page in order for WordPress to use this new template when serving that particular page of the site.

Common uses for custom page templates are to create unique page layouts for about page, services page and contact page. If you need to configure your page layout beyond what is available in the default page.php file, a custom page template is what you need.

How to create a custom page template?

Creating a custom page template is easy! Create a blank php document and add the following code:


<?php
/*
Template Name: About
*/
?>

Configure the template name to something recognisable (e.g. template-about.php). The ‘Template Name’ is what will appear in a drop-down menu within the WordPress admin screen.

In the remainder of the document add your HTML and WordPress template tags to construct your desired layout. This might utilise tags such as to build the page using the existing header/sidebar/footer elements, or you might be building something completely unique using a complete WordPress loop. Don’t forget, you can also hard code features into your template file that are unique to this page, such as a contact form, YouTube video or a Google Maps API.

Once you’ve created your custom page template and uploaded it to your theme directory, create your page using the WordPress editor. Any content you add using the WYSIWYG will appear wherever the tag was placed within the template. This page will use the default page.php template unless your change the Template option under Attributes:-

Select the Template menu and choose the template file with the name you supplied. Hit the publish button and see your WordPress content dynamically generated using the structure of your custom page template.

It’s as easy as that! 🙂

 

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development and web site design. His expertise is WordPress & Magento as well as many other frameworks. Would you like to work with Nathan? Send him an email on [email protected]

It’s good to share