How to make WordPress galleries Bootstrap responsive

Using WordPress native gallery is pretty convenient if you don’t need something really fancy. The main issue with it is that it’s not natively responsive.

So how to make your gallery responsive if you’re developing under Bootstrap?

I did a long research and most of the plugins use old versions of Bootstrap with span classes rather using col classes.

The one I found working with Bootstrap version 3 and up, WordPress version 3.6 and up, and ultimately used in one of my projects is called Twitter Bootstrap Galleries. It wraps WP galleries in Bootstrap grid and makes them fully responsive.

The plugin is very simple, you don’t need to change anything in your code or [gallery] shortcode. The only thing you need to do is change the number of columns to show per row. Navigate to Settings -> Twitter Bootstrap Galleries settings and choose the number.

Choosing number of columns per row

Here’s the grid matrix for the plugin:

[code]
/* the grid display */
/*
| columns | mobile | tablet | desktop |per page |
—————————————————-|———–|
| 1 | 1 | 1 | 1 | 10 |
|—————————————————|———–|
| 2 | 1 | 2 | 2 | 10 |
|—————————————————|———–|
| 3 | 1 | 1 | 3 | 9 |
|—————————————————|———–|
| 4 | 1 | 2 | 4 | 12 |
|—————————————————|———–|
| 5 | n/a | n/a | n/a | n/a |
|—————————————————|———–|
| 6 | 2 | 4 | 6 | 12 |
|—————————————————|———–|
| >=6 | n/a | n/a | n/a | n/a |
|—————————————————————|
*
*
*/
[/code]

That’s it! Super simple!

Enjoy your responsive galleries!

How to solve small image size thumbnail generation issues in WordPress

Working with images is perhaps one of the most annoying things in WordPress, well, at least for me. Websites with thousands of images are a pain in the ass. Why? Because you have to regenerate thumbnails for newly added image sizes. Let’s not even start with the cases when the regeneration is already over and you realize you have to add another image size!

You probably know that image sizes are defined by add_image_size() function in functions.php file (already reserved names for image sizes in WordPress are thumb, thumbnail, post-thumbnail, medium, large). Here’s an example, from one of my latest projects:

[html]
<?php // Image sizes
if ( function_exists( ‘add_image_size’ ) ) {
add_image_size( ‘full-image’, 1920, 1080, true ); //(cropped)
add_image_size( ‘half-image’, 960, 640, true ); //(cropped)
add_image_size( ‘third-image’, 768, 528, true ); //(cropped)
} ?>
[/html]

As you can see, I have pretty large sizes defined. And guess what! Thousands of images already uploaded to the website are not large enough, simple Regenerate Thumbnails plugin won’t help: during regeneration whenever the plugin sees an image with smaller dimensions than your defined image size it will skip the image, and you won’t get your thumbnails. Same goes to newly uploaded small images.

But having all the right sized images is very important, especially in grid layouts.

Now, you have 2 options: replace all your small images with large ones (a tedious task!) or go upscaling.

Sometimes you have to go the easy way and let the images just upscale. Note, that you will lose in quality. If it’s a client’s website, you can follow the directions below, then let the client know that they need to replace/upload larger images if they want sharper display.

You will need 2 plugins instead of Regenerate Thumbnails.

First find and install Thumbnail Upscale plugin. After installing, all your future small media attachments will be upscaled and cropped automatically, that is, if you set cropping in your add_image_size() function to true, like I have in the example above.

But if you have older images you need to crop, too, install Force Regenerate Thumbnails plugin and run it. The plugin deletes all old image sizes and generates new thumbnails, upscaling if necessary.

Voilà, you now have all the sizes you need!

33 most commonly used functions in WordPress for beginners

You can’t build a WordPress theme without WordPress functions. Ok, you can, but that would mean then you simply don’t need WordPress platform and its functions. What’s the point of using WP in that case?

So what are the most common functions used during theme development? I created this list considering simple themes. In other words, this is more or less a beginner’s guide.

Let’s start with general functions.

bloginfo()

This function displays general information about your site, like site title, tagline, home url, it can get your template or stylesheet directory, etc.

Bloginfo() function is used widely in theme development.

General usage of bloginfo() function looks like this:

[html]
<?php bloginfo( $show ); ?>
[/html]

Where $show is the type of information you want to display. Most commonly used keywords are:

‘name’ – Shows the site title which is set in Settings -> General in your WordPress dashboard.
‘description’ – Shows the tagline which is set in Settings -> General in your WordPress dashboard.
‘url’ – Shows Site Address (URL) which is set in Settings -> General in your WordPress dashboard.
‘template_directory’ – It’s the URL to your active theme directory.

The default keyword is ‘name’.

Here are some examples

[html]<?php bloginfo(‘name’); ?>[/html]

Shows your site title.

[html]<?php bloginfo(‘description’); ?>[/html]

Shows your site tagline.

[html]<a href=”<?php bloginfo(‘url’); ?>”>Go to frontpage</a>[/html]

Creates a link to your homepage

[html]<img src=”<?php bloginfo(‘template_directory’); ?>/images/header.jpg” />[/html]

Displays an image in your theme’s images folder.

wp_title()

This function generates the title of the current page.

wp_title() is usually used in the header (header.php), insidetags, which in their turn appear insidetags.

General usage of wp_title() function looks like this:

[html]
<?php wp_title( $sep, $display, $seplocation ); ?>
[/html]

$sep (string) is the separator, usually separating site title and inner page title, be it a post, a page, a category or a custom post type. The default value is » (»)

$display (boolean) defines whether you want to display the title as text (TRUE) or just retrieve its value (FALSE). The default value is TRUE.

$seplocation defines whether the separator is used before (left) or after (right) the title.

Here are some examples:

[html]
<title><?php wp_title(); ?></title>
[/html]

This will display as the following:

» Your post title

[html]
<title><?php wp_title(‘&laquo;’, true, ‘right’); ?> <?php bloginfo(‘name’); ?></title>
[/html]

It will display as

Your blog name «

wp_head() and wp_footer()

wp_head and wp_footer are action hooks triggered by wp_head() and wp_footer() functions accordingly.

wp_head() is used insidetags and wp_footer() is called right before closing tag. They call and do all the actions hooked to them. If you’re more experienced developer you might have already hooked an action by using add_action.

Most of the plugins need these hooks to be present in the theme so they can work. Be sure you have them in your template files (usually in header.php and footer.php).

None of these two functions accept any parameters.

get_header()

This function includes your header.php file into the template. The general usage is:

[html]
<?php get_header( $name ); ?>
[/html]

$name is the name of your header file, in case you have several headers with different titles, for example – header-thistitle.php. To call this header you need to write:

[html]
<?php get_header( ‘thistitle’ ); ?>
[/html]

get_header() function is usually used in homepage and inner pages templates, like 404.php, index.php, single.php, category.php, page.php, tag.php, search.php, archive.php.

get_sidebar()

This function includes sidebar.php file into the template. Just like get_header() function it has a $name parameter:

[html]<?php get_sidebar( $name ); ?>[/html]

[html]<?php get_header( ‘thistitle’ ); ?>[/html]

This includes sidebar-thistitle.php into the template.

get_footer()

get_footer() functions just like get_header() and get_sidebar(). It includes footer.php file into the template.

[html]<?php get_footer( $name ); ?>[/html]

[html]<?php get_footer( ‘thistitle’ ); ?>[/html]

This includes footer-thistitle.php into the template.

get_search_form()

You might need a search form for your website. You can display that search form using get_search_form() function. The search form itself can then be edited in searchform.php file.

[html]
<?php get_search_form($echo); ?>
[/html]

The parameter $echo for get_search_form() function is boolean and optional. By default it’s true, displaying the search form. If it’s set to false, the function will return the searchform as a string instead of displaying it.

single_cat_title() and single_tag_title()

These functions display or return category and tag titles accordingly. Here’s the usage:

[html]
<?php single_cat_title( $prefix, $display ); ?>
<?php single_tag_title( $prefix, $display ); ?>
[/html]

$prefix is a string defining the text to display before the title.
$display is a boolean. If it’s true, the title is displayed, if it’s false the title is returned as a string.

Examples:

[html]
<p><?php single_cat_title(‘You’re currently viewing this category: ‘); ?>.</p>
<p><?php single_tag_title(‘You’re currently viewing this tag: ‘); ?>.</p>
[/html]

Output will be:

You’re currently viewing this category: [Category name]
You’re currently viewing this tag: [Tag name]

the_search_query()

the_search_query() works pretty much the same as single_cat_title and single_tag_title. But instead of category or tag titles it shows the search term if a search was performed. The function is usually used in search.php file which displays search results.

Example:

[html]
<p>Your search for “<?php the_search_query() ?>” term returned the following results.</p>
[/html]

Now let’s see several conditional tags.

is_home()

This is a conditional tag which checks whether the index page is displayed. The function returns true or false, it’s boolean.

is_home() doesn’t accept any parameters.

Example:

[html]
<?php if (is_home()) {
echo ‘This is the homepage’;
}
else {
echo ‘This is not the homepage’;
}
[/html]

is_single()

This conditional tag checks whether a single post is displayed. The function returns true or false, it’s boolean.

Usage:

[html]
<?php is_single($post); ?>
[/html]

$post is post ID, post title or post slug.

[html]
<?php is_single(); ?>
[/html]

The condition is true when a single post is displayed.

[html]
<?php is_single(1); ?>
[/html]

The condition is true when the single post with ID of 1 is displayed.

[html]
<?php is_single(‘My Post’); ?>
[/html]

The condition is true when the single post with the title My Post is displayed.

[html]
<?php is_single(‘my-post’); ?>
[/html]

The condition is true when the single post with the slug my-post is displayed.

You can also use multiple parameters if you want to check the condition for several single posts, like so:

[html]
<?php is_single(array(‘My Post’, 1, ‘my-other-post’)); ?>
[/html]

is_page()

This condition tag checks whether a page is displayed. The function returns true or false, it’s boolean.

[html]
<?php is_page($page); ?>
[/html]

Like is_single() parameter, $page can be page ID, page title, page slug.

[html]
<?php is_page(); ?>
[/html]

The condition is true when a page is displayed.

[html]
<?php is_page(1); ?>
[/html]

The condition is true when the page with ID of 1 is displayed.

[html]
<?php is_page(‘My Page’); ?>
[/html]

The condition is true when the page with the title My Page is displayed.

[html]<?php is_page(‘my-page’); ?>[/html]

The condition is true when the page with the slug my-page is displayed.

You can also use multiple parameters if you want to check the condition for several pages, like so:

[html]
<?php is_page(array(‘My Page, 1, ‘my-other-page’)); ?>
[/html]

is_category()

This conditional tag checks if a category is displayed. The function returns true or false, it’s boolean.

[html]
<?php is_category( $category ); ?>
[/html]

$category can be a category ID, category title or category slug.

[html]
<?php is_category(); ?>
[/html]

The condition is true when a category archive page is displayed.

[html]
<?php is_category(1); ?>
[/html]

The condition is true when the category with ID of 1 is displayed.

[html]
<?php is_category(‘My Category’); ?>
[/html]

The condition is true when the category with the title My Category is displayed.

[html]
<?php is_category(‘my-category’); ?>
[/html]

The condition is true when the category with the slug my-category is displayed.

You can also use multiple parameters if you want to check the condition for several categories, like so:

[html]
<?php is_category(array(‘My Category, 1, ‘my-other-category’)); ?>
[/html]

in_category()

This conditional tag checks if a post is in specified categories. The function returns true or false, it’s boolean.

[html]
<?php in_category( $category, $_post ) ?>
[/html]

$category is one or more categories we want to check the post for. It can be a category ID, title or slug. We can also check for multiple categories using array().

$_post is the post we want to check. It’s the post id.

[html]
<?php if (in_category(‘my-category’)) {
//do something here
}
elseif (in_category(array(1, ‘My Other Other Category’))) {
//do something else here
}
else {
//do something completely else here
} ?>
[/html]

is_tag()

is_tag() is pretty much like is_category(). It checks if a tag archive page is displayed. The function returns true or false, it’s boolean.

[html]
<?php is_tag( $tag ); ?>
[/html]

$tag is the ID, title or slug of the tag. It also can be an array of IDs, titles and slugs if checking for multiple tags.

[html]
<?php is_tag(); ?>
[/html]

The condition is true when a tag archive page is displayed.

[html]
<?php is_tag(1); ?>
[/html]

The condition is true when the tag with ID of 1 is displayed.

[html]
<?php is_tag(‘My Tag’); ?>
[/html]

The condition is true when the tag with the title My Tag is displayed.

[html]
<?php is_tag(‘my-tag’); ?>
[/html]

The condition is true when the tag with the slug my-tag is displayed.

You can also use multiple parameters if you want to check the condition for several tags, like so:

[html]
<?php is_tag(array(‘My Tag, 1, ‘my-other-tag’)); ?>
[/html]

has_tag()

This conditional tag behaves the same way in_category() does. It checks if a post has any specified tags. The function returns true or false, it’s boolean.

[html]
<?php has_tag( $tag, $_post ) ?>
[/html]

$tag is one or more tags we want to check the post for. It can be a tag ID, title or slug. We can also check for multiple tags using array().

$_post is the post we want to check. It’s the post id.

[html]
<?php if (has_tag(‘my-tag’)) {
//do something here
}
elseif (has_tag(array(1, ‘My Other Other Tag))) {
//do something else here
}
else {
//do something completely else here
} ?>
[/html]

is_author()

is_author() function behaves like is_category() and is_tag() conditional tags. It checks if an author archive page is displayed. The function returns true or false, it’s boolean.

[html]
<?php is_author($author); ?>
[/html]

$author is the author ID or nickname. It also can be an array of IDs, nice names and nicknames if checking for multiple authors.

[html]
<?php is_author(); ?>
[/html]

The condition is true when an author archive page is displayed.

[html]
<?php is_author(1); ?>
[/html]

The condition is true when the author with ID of 1 is displayed.

[html]
<?php is_author(‘John Smith’); ?>
[/html]

The condition is true when the author with the nickname John Smith is displayed.

[html]
<?php is_author(‘john-smith’); ?>
[/html]

The condition is true when the author with the nicename john-smith is displayed.

You can also use multiple parameters if you want to check the condition for several authors, like so:

[html]
<?php is_author(array(1, ‘John Smith’, ‘john-other-smith’)); ?>
[/html]

Now let go through functions that are responsible for queries and loops.

get_posts()

This function queries for posts based on several parameters.

[html]
<?php $posts_array = get_posts( $args ); ?>
[/html]

The default usage of the function is:

[html]
<?php $args = array(
‘posts_per_page’ => 5,
‘offset’ => 0,
‘category’ => ”,
‘orderby’ => ‘post_date’,
‘order’ => ‘DESC’,
‘include’ => ”,
‘exclude’ => ”,
‘meta_key’ => ”,
‘meta_value’ => ”,
‘post_type’ => ‘post’,
‘post_mime_type’ => ”,
‘post_parent’ => ”,
‘post_status’ => ‘publish’,
‘suppress_filters’ => true ); ?>
[/html]

Queries are a bit complex part of WordPress. I’m going to link to WP Codex page. You can read more about get_posts() function there.

new WP_Query()

wp_query() is another way to query posts. Here you can find more detailed info about this class reference. And Bill Erickson has a brilliantly detailed post about all the arguments of wp_query over here.

have_posts()

This function checks if there are any posts in the current query. It’s boolean, is either true or false.

[html]
<?php have_posts(); ?>
[/html]

It doesn’t accept any parameters.

For example:

[html]
<?php while ( have_posts() ): the_post();
//do stuff
endwhile;
?>
[/html]

the_post()

This function basically starts the WordPress loop. It retrieves the next post in the loop, getting it ready to use.

[html]
<?php the_post(); ?>
[/html]

It doesn’t accept any parameters.

For example:

[html]
<?php while ( have_posts() ) : the_post();
//Do stuff here
endwhile;
?>
[/html]

So now we’re inside the loop. Let’s see what functions we need there.

the_title()

This function is used to display or return the title of the current post.

[html]
<?php the_title( $before, $after, $echo ); ?>
[/html]

$before is a text (string) to display before the title.

$after is a text (string) to display after the title.

$echo is boolean. If it’s true, the title will be displayed. If it’s false the title will be returned as a string.

[html]
<?php the_title(); ?>
[/html]

This will return the title of the post.

[html]
<?php the_title(‘This post’s title is ’); ?>
[/html]

will display: This post’s title is [post title].

You can write html tags for $before and $after, like so.

[html]
<?php the_title(‘<h2>’, ‘</h2>’); ?>
[/html]

This will enclose the title in <h2> heading tags.

the_content()

This function is used to display the content of the post.

[html]
<?php the_content( $more_link_text, $stripteaser ); ?>
[/html]

$more_link_text is a string to display for the more link – <!–more–>. “More” quicktag defines where the content should be cut off and display the more link.

$stripteaser is boolean, whether to display strip teaser content before more link.

the_excerpt()

[html]
<?php the_excerpt(); ?>
[/html]

This function displays the excerpt of the post if it’s defined, or the beginning of the post cut off with […] sign. It doesn’t accept any parameters.

the_permalink()

This function displays the link to the current post.

[html]
<?php the_permalink(); ?>
[/html]

It has no parameters.

[html]
<a href=”<?php the_permalink(); ?>”><?php the_title(); ?></a>
[/html]

This will display the title of the post linking to itself.

the_author()

This function displays the author of the current post.

[html]
<?php the_author($post_id); ?>
[/html]

$post_id is the id of the post.

[html]
<p>The author of this post is <?php the_author(); ?>.</p>
[/html]

get_the_date()

This function returns the date the current post was written.

[html]
<?php echo get_the_date( $d ); ?>
[/html]

$d is the PHP date format (string).

[html]
<p>The date this post was written is <?php echo get_the_date(); ?>.</p>
[/html]

the_category()

The function displays a link to category or categories a post belongs to.

[html]
<?php the_category( $separator, $parents, $post_id ); ?>
[/html]

$separator is a string to display between category links.

$parents decides how to display parent/child relations. It can be:

‘multiple’ – displaying separate links to parents and children.
‘single’ – displays only children.

$post_id is the id of the post we want to get categories of.

For example:

[html]
<p>Categories: <?php the_category(‘ ‘); ?></p>
[/html]

This will display the list of categories separated by a space.

has_post_thumbnail()

This is a boolean function. It checks whether a post has a featured images and returns true if there is one, and false if there isn’t one.

[html]
<?php has_post_thumbnail( $post_id ); ?>
[/html]

$post_id is the id of the post to check for featured image.

For example:

[html]
<?php if (has_post_thumbnail()) {
// do stuff
} ?>
[/html]

the_post_thumbnail()

This function displays the featured image of a post.

[html]
<?php the_post_thumbnail( $size, $attr ); ?>
[/html]

$size is the image size of the featured image to display in. It may be the default sizes in WordPress – thumbnail, thumb, medium, large, full, or a custom size defined in functions.php file using add_image_size() function.

$attr is an array of img tag attributes, values.

[html]
<?php $default_attr = array(
‘src’ => $src,
‘class’ => “attachment-$size”,
‘alt’ => trim(strip_tags( $wp_postmeta->_wp_attachment_image_alt )),
); ?>
[/html]

For example, inside the loop:

[html]
<h2><?php the_title(); ?></h2>
<?php echo get_the_date();
if ( has_post_thumbnail() ) {
the_post_thumbnail();
}
the_content(); ?>
[/html]

comments_template()

This function loads the comments template. It should be displayed outside the loop.

[html]
<?php comments_template( $file, $separate_comments ); ?>
[/html]

$file determines which comments template to load if you, say, have several files – comments-books.php, comments-lectures.php, comments.php. The default file to load is comments.php.

$separate_comments is boolean, defining whether to separate comments by comment type.

For example:

[html]
<?php
while ( have_posts() ) : the_post(); ?>
<h2><?php the_title(); ?></h2>
<?php the_content();
endwhile;
comments_template();
?>
[/html]

Repeatable WordPress custom fields in a metabox

I once developed a website for a branding company who wanted to add as many boxes to a page as they desired. Boxes could contain text or images.

The obvious solution to this is using custom metaboxes.

But how do you make fields in a metabox repeat themselves, over and over? I wanted to have a button on the metabox, called something like “Add box”, and create a new box with one click.

I usually use WebDevStudios’ Custom Metaboxes and Fields for WordPress for my projects. It’s light, easy to use, well documented, and will satisfy almost every task you may have in mind involving metaboxes. And it did satisfy all my projects, until I hit the wall of repeatable fields.

For days I searched for other snippets, plugins, but none had the functionality I needed.

And then I came across Advanced Custom Fields (ACF) plugin. It’s like a GUI layer for custom fields. If you’re not comfortable with code snippets or modifying your functions.php file, ACF is the perfect plugin for you even if you don’t need repeatable fields for your metaboxes.

The plugin only by itself has very standard functionality: you create your metaboxes, name them, sort them, use them. However, the plugin offers a number of very useful add-ons, like Date and Time picker, Gallery field, Options page and others. The add-on I needed was called Repeater Field.

Some of the add-ons are free, but a couple cost $25. I payed for Repeater Field and I don’t regret a cent I invested in it. It saved me days of (maybe unsuccessful) work!

Go to plugin repository from your WordPress Dashboard, search for Advanced Custom Fields and install the plugin.

Purchase Repeater Field from plugin website, and upload the zip file from Plugins -> Add New -> Upload.

Now we’re ready to build our metabox with repeating fields!

Go to Custom Fields from your Dashboard and create a new field group by clicking Add New.

Enter the title. I’ll name mine Box.

Choose which post types should show your custom box. Mine should show up on pages, so in my case post type is equal to page.

Customize bottom options to your needs. I just change Style to Standard (WP metabox), it will ensure the proper look of my metaboxes.

Advance Custom Fields: Adding Field Group

Advance Custom Fields: Field Group Options

Now scroll up to top and let’s add fields to your field group. Click on Add Field.

Name the Field Label. I just put there Box, too.

Now, if the fields in your metabox are going to be repeatable you have to correctly choose your Field Type. Select Repeater from the dropdown.

Advance Custom Fields: Field Type - Repeater

Fill in Field Instructions if you want to.

My Box metabox is not really required so I’ll choose No.

Now go ahead and create all the subfields of your repeater field you need. You can choose subfield types, selection options if you need to have a dropdown list or a radio selection, you can fill in instructions for each subfield, choose layout, etc.

Here is my list of subfields and an example of one detailed subfield as a radio selection.

Advance Custom Fields: Repeater Fields

Advance Custom Fields: Repeater field details

Here’s a video showing how to work with the plugin and Repeater Field add-on.

Now that you created your repeatable fields in metabox, it’ll show up in post types you chose, in my case – pages.

Advance Custom Fields: Metabox in page editor

I’m going to click on Add Box and fill in the details I need.

Advance Custom Fields: Repeater subfields

Add as many boxes as you need.

Now that it’s done, you need to integrate the values of your fields into your template, in other words – let’s loop through the metabox and call field values for each repeatable field.

When your fields aren’t repeatable, just a regular metabox, you’ll need the_field() and get_field() functions to display and return the values of a specified field.

However with Repeater Field and Flexible Content Field add-ons you’re going to need the_sub_field() and get_sub_field() functions, because your fields are inside a repeater field already, which makes them subfields.

Here’s what my code ended up to be. You need to run a loop. It’s just like a regular WordPress loop, only using have_rows() instead of have_posts(). The script goes through all the boxes and checks whether they have this or that value, and according to conditions wraps subfield values in appropriate placeholders.

[html]
<?php if( have_rows(‘box’) ): //Let’s check if we added any boxes
while ( have_rows(‘box’) ) : the_row(); //Metabox loop
$box_size = get_sub_field(‘box_size’); //Starting to check values of different subfields and wrapping them accordingly ?>
<div class="box<?php if ( $box_size == ‘big’ ) { ?> w2<?php } ?><?php if ( $box_size == ‘rectangular’ ) { ?> w2h1<?php } ?>" style="background: <?php if ( get_sub_field(‘background_image’) ) { ?> url(‘<?php the_sub_field(‘background_image’); ?>’) <?php } ?><?php if ( get_sub_field(‘background_color’) ) { ?> #<?php the_sub_field(‘background_color’); } ?>;">
<?php if ( get_sub_field(‘image_link’) ) { ?>
<a class="white-font" href="<?php the_sub_field(‘image_link’); ?>">
<?php } ?>
<?php if ( get_sub_field(‘image_text’) ) { ?>
<div class="box-text box-text-grey-bg"><?php echo apply_filters(‘the_content’,get_sub_field(‘image_text’));?></div>
<?php } ?>
<span class="linked"></span>
<?php if ( get_sub_field(‘image_link’) ) { ?>
</a>
<?php } ?>
<?php $box_padding = get_sub_field(‘box_padding’);
if ( $box_padding == "small" ) { ?>
<div class="box-text">
<?php }
else if ( $box_padding == "medium" ) { ?>
<div class="box-text2">
<?php }
else if ( $box_padding == "big" ) { ?>
<div class="box-text4">
<?php }
else { ?>
<div class="box-text">
<?php }
echo apply_filters(‘the_content’,get_sub_field(‘box_text’)); ?>
</div>
</div>
<?php endwhile; // Close the loop
endif; ?>
[/html]

Here’s all you need to know about ACF and Repeater Field:

General ACF documentation
Repeater Field add-on
have_rows() function
the_field() function
get_field() function
the_sub_field() function
get_sub_field() function

I will still continue using WebDevStudios’ snippet for creating custom metaboxes up to the point where they can’t solve a specific problem because I prefer small scripts over plugins. But if it comes to repeatable metabox fields, ACF is the solution!

Have you ever wanted to create repeatable custom fields in metaboxes? How did you solve that problem? If you have any alternatives to Advanced Custom Fields plugin and Repeater field add-on, please, share your solutions below, I’d love to know your approach!

Have you had any experience with Advanced Custom Fields plugin and Repeater Field add-on before? How was it?

If you have any questions regarding ACF or custom metaboxes in general, leave a comment below and I’ll try to answer it.