How to design a WordPress website with ACF and the ACF Extended module (Prositeweb)

Extended ACF de Prositeweb Site web WordPress

In this article, we will see how to create a WordPress website with ACF and the ACF Extended module.

Have you ever wondered how to design a website? In this article, we look at all the steps needed to design a website. We will assume that you have some computer skills and do not know how to proceed to have your website online. To better focus on the essentials, we will define a few criteria without going into too much detail about the choices. It is important to remember that the choice of one tool or the other can be purely related to our experience. With this in mind, you can use your research to choose solutions that are favorable to your budget or affinity.

What do we need to design a website

To design a website, apart from all the documentary investigation or analysis that we generally recommend, you will need :

  1. A domain name
  2. A space to store your data
  3. A web design technology (Or a programming language)
  4. A design for your website
  5. Features you may want to add
  6. Content for your website
  7. Photos and videos

1 – Domain name

A domain name is a name in alphabetical character (generally easy to remember) that characterizes your activity. You usually choose a domain name based on what you propose as a concept. In addition, before making a choice, it is important to ask yourself about the competition.

To choose a domain name, here are some recommendations:

  • Choose a name that is easy to remember. When you give your domain name, people should be able to find it without too much trouble.
  • Look at what competitors have as a domain name. In addition, you must have in mind the message you want to convey.
  • Consider Choosing a Top Level Domain (TLD) that refers to your industry

Where to search for a domain name?

There are thousands of domain name providers around the world. Each supplier has its advantages and disadvantages. However, we will not enter into the comparison. Below are some of the most popular suppliers in Canada.

You can read our article that explains how to better choose a domain name and a web host.

2 – Space to store your data

In order to store your data, you require a physical or virtual location. The domain name providers also offer web hosting (in most cases). You can therefore opt for such an option to make things easier for yourself. If nevertheless, you prefer to have a different domain name provider than the one providing the web hosting, you need to establish the connection between the domain name and the server. We will briefly explain how to achieve this.

Before choosing a web host for your website, keep in mind the features of the applications you want to use. A server for an HTML website might not have the same characteristics as a website with Magento or WordPress. You can seek advice before making a final decision.

To search for a web host, the examples above can help you. You can also do a search on Google to better compare.

How to connect a domain name with a web server?

To connect your domain name with your web host, you need to use what is commonly called DNS (Domain Name Server). These are the parameters of the domain name that decide where to point your website. You can use it to add the IP address of your web server, add email settings or even to strengthen security.

3 – A web design technology (Or a programming language)

There are several website design tools, we have briefly described some tools that can help you via this link.

In this article, we talk about website design with WordPress and ACF.

What is ACF (Advanced Custom Field)?

It is a WordPress extension that allows you to design blocks in order to easily design a website or an online store. The ACF is available in two versions, the free version which you can find via the extension tab of the extension bank. There is also a paid version. You can purchase the paid version on the officialACF website. Of course, the free version has fewer features than the paid version. We will not dwell on the differences between the two versions. However, you can read the ACF website to understand how the two versions differ.

Combine with our web design tool (ACF Extended)

Prositeweb’s Extended ACF Module is a WordPress extension that uses ACF to help developers create custom themes. For the past five months, we have been experimenting and testing various approaches to using ACF (Advanced Custom Field) to design a website or an online store. It is a pleasure to present you some results of our experiments. The Prositeweb team has developed an extension to support the custom development process.

Indeed, the ACF extension gives the possibility to easily design a WordPress theme. However, you must have PHP programming skills. Through our project, we wanted to simplify the process to allow junior developers to simply use the ACF. In this article we will briefly talk about the Advanced Custom Field extension. Then we will explain how it works. Finally, we will present you the additional features you will get with our module. If you wish to have a copy of the module, you can contact us via this link.

How does the ACF work?

The general idea behind ACF is to create custom fields for the pages of a website. Indeed, by default WordPress offers a form that you can use to write your content. This is not always easy to use if you want to customize or make your website dynamic. With ACF, you can, for example, create fields to make sections of your website proactive. Or add a testimonial tab on your website. You can also create options for blocks and use them from the modern WordPress editor.

Some features of the ACF Pro

The Prositeweb team has extensively explored ACF Pro for custom theme design. Below are some of the features of the ACF Pro.

  • Easily create repeating features. With the PRO version, you can easily create repeating elements. This can be especially useful if you want to add testimonials or carousels to your website.
  • Easily design the blocks. The new WordPress content editor (Gutenberg) requires extensive knowledge of JavaScript to be able to create the blocks. With the ACF Pro and a little knowledge of PHP, you can create your blocks very easily.
  • Create plenty of options for your themes or extensions. If you are developing themes or extensions, you must agree with me that it takes a lot of effort to create the options for your pages. With ACF, you can do this with a few lines of code.

You can find the list of features on this website.

What we bring to the table to make the development process easier.

Our module allows, among other things, to simplify the steps of designing a website with the ACF. Indeed, to configure and make a theme with ACF, you have to make a first configuration, create the blocks or parts of your website. Then, pass the variables in the parts you want to make dynamic. All these steps seem complex if you lack PHP development skills. In our module, we have made all the configurations you will need to use the ACF. To wit:

  • Create the important functions to the initial configuration
  • Make the block design process easy
  • Allow developers to create pages without having to worry about the complexity of PHP.

After several tests and validation, converting an HTML theme into a WordPress theme becomes a breeze.

How does our Prositeweb Extended ACF module work?

The way the “Extended ACF” extension works is very simple. After downloading and installing, you will have access to a configuration tab. Via this tab you will be able to enter the name of the folder where you want to put your blocks. The folder should be in the folder of your active theme. You will also have access to tabs to see the PHP blocks you create and then assign your variables.

With our module. creating a WordPress theme is as simple as sectioning off your design and adding it to a block folder. The extension will take care of locating the blocks and adding the necessary variables. You can then make the design dynamic by editing in the WordPress editor.

Practical steps

ACF (Advanced Custom Fields) is a plugin for WordPress that helps many WordPress / website developers to create custom websites using WordPress blocks.

The plugin is easy to understand for developers with basic knowledge of PHP or simple OOPs programming.

But every amazing thing can also have certain drawbacks. With ACF, it’s the time developers spend manually assigning ACF variables in custom fields to work.

So, this problem has been solved by an extended version of ACF created by Prositeweb Inc.

In this version of ACF, developers would have to assign variables in the code and the rest is taken care of by itself.

Here is a complete walkthrough on how to use this fantastic time-saving plugin: –

Setting up the ACF Extended Plugin.

Once the plugin is installed, it’s essential to create a folder in which it will grab all the blocks.

(for example, ‘template-block’ is the folder created to store all the blocks) from the folder name.

Then specify the folder under the Extended ACF Prositeweb tab that you can find under the ‘Appearance’ tab (refer to the image below).

nom du dossier acf extended pro

Now that the folder is specified, another folder named ‘part’ should be created where the blocks containing HTML code should be placed.

So why do we need two folders for the plugin to work? This will be explained in the next step.

File Configuration ACF Plugin folder

Once the folders are created, the folder ‘part’ should contain the blocks with the hardcoded HTML code.

Example – ‘index_hero_1.php’ is the name of the block present in the part folder; add these lines of code –

<?php
$blockid = $args['blockid'];
?>

Variable $blockid will retrieve all the custom ACF code from the plugin, which later can be used. ( explained in later steps).

The same named PHP file should be created under the folder ‘template-block ’.

In this file, you need to add these lines of code on top of the file –

<?php
$filename = basename(__FILE__, ".php");
prosite_display_block($filename);
?>

Now, the code above will search for the same named file under the folder ‘part’ .

$filename variable will store the file name, and the prosite_display_block will call all the variables specified on the file.

Even though no variables are added in the HTML code file, you will find the block appears on the WordPress dashboard under the Prositeweb Block tab.

Bloc

If all the steps above are followed correctly, you should see the block as in the image above.

Adding and assigning ACF variables

So now the blocks are created and visible on the WordPress dashboard, it’s time to assign variables.

The PHP block files under folder ‘part’ are where all the coding should be done.

After years of Website development and experience gained by the developers at Prositeweb Inc. We build this plugin to be as efficient as possible by adding pre-built fields ACF variables that are used repeatedly.

Variables ACF

All the essential variables are laid out for the developers to use immediately.

The empty checkboxes can be used to assign the variables to the block, but the beauty of this plugin is that they are assigned automatically when the developer gives them in the PHP files.

The key values for these variables can be found under the Prositeweb Block tab.

If you need to add new variables, they can be added by using the add new variable button, as shown in the image below.

Ajout de nouvelles variables ACFrto’,$blockid);?>

“Add new variable” option will provide you with the fields to have a custom key value to the variable created, the field key is assigned automatically.

All the field types are available under the select option named field type, and now the variable can be added by clicking Add value button then it will show up under the available variables to be assigned to the blocks.

In the next step, you will learn how to use the plugin.

How to use the ACF Extended Plugin

Now that you know the location and keys of the variables, the following steps will provide instructions to call the variable in the PHP file.

To call the values, the $blockid variable present on top of the HTML code.

It should be used by calling it under the class name ‘psw_values’ under the brackets (‘variable name’, $blockid); example –

<?php
$variable_name = psw_values(‘title’,$blockid);
echo $variable_name;
// or
echo psw_values(‘title’,$blockid);?>

The code above will output all the texts added under the field ‘title’ from the block when used on any WordPress page.

This code is used to store values into a variable or just call them as it is, but when using a repeater field, gallery or photos.

The developers at Prositeweb Inc have simplified the generic process for you –

Repeater Fields –

The working of repeater fields is almost as same as how it’s presented on the ACF tutorial website that uses a loop to call all the values under the repeater field

But instead of calling ‘get_sub_field(‘values’);’ it can be accessed by using the code example below.

<?php $repeater = psw_values(‘repeater’,$blockid);
if($repeater):
foreach($repeater as $row){
echo $row[‘value’];
}
endif;
?>

The code above will retrieve the repeater field as an array and output the key values.

For nested repeater values, the same concept should be used.

Gallery Field –

The gallery field works almost as same as the repeater field, it will retrieve array.

key[0] will show the URL source, and key[1] will show width key[2] will show height. (Refer to the code below)

<?php $gallery = psw_values(‘gallery’);
if($gallery):?>
<div class="row">
<?php foreach($gallery as $row):?>
<div class="col-md-4">
<img src="<?php echo $row[0];?>" width="<?php echo $row[1];?>" height="<?php echo $row[2];?>" alt="">
</div>
<?php endforeach;?>
</div>
<?php endif;
?>

Photo field –

The photo field is used by URL ‘wp_get_attachment_image_src(‘value’, ‘size’);’.

This field is already added in the plugin to save the developers the hassle of calling this repeatedly.

The photo field can be used as shown below –

<?php $photos = psw_values(‘photo’,$blockid);?>
<img src="<?php echo $photos[0];?>" alt="">

The same logic applies as the gallery field key[0] will show the URL source, key[1] will show the width key[2] will show height.

Accessing the key fields on the page editor –

Now that you understand variables’ usage, the plugin will do wonders.

Once the needed ACF variables have been assigned, the block called on the page editor should be saved first, and the page should be reloaded.

When reloads the page, all the variables assigned should automatically appear under the block editor.

For the example below, all the variables assigned can be edited under the block editor.

Bloc WordPRess

Once the page is updated, all the entered values should appear on the page.

Sortie du bloc ACF WordPress

If everything is followed correctly, the plugin should work perfectly, and the entered values should show up on the page, as presented on the image above.

So now that all the steps for using the plugin are cleared,

it should save you a tremendous amount of time to assign the custom fields repeatedly going back and forth on the dashboard and the block editor to view the variables set.

With this plugin, all the hassle of building a website under a deadline would seem like a piece of cake.

So get this plugin today and ease the process of developing websites on WordPress, using ACF plugin.

Leave a comment



Thank you

Thank you for contacting Prositeweb,
Go back to the home page

Please fill free to contact us at any time for any request regarding our services. Contact us.

Thank you