Customer Story: Customizing WPCD With Elementor & ACF

This is an article written by a customer residing in Spain. He completely changed the WPCD landing page look and feel using the popular Elementor page builder combined with the widely used Advanced Custom Fields plugin.

He shares some of what he did along with relevant code snippets.

The original article has been edited for clarity, grammar and brevity.

---

To whet your appetite, here are a couple of images of the final landing pages:

Achieving the above look is primarily an exercise in CSS and HTML. But, there are a number of places where we had to get down into the WPCloudDeploy code so that we could render dynamic data from WPCD’s database.

One area is the count of the servers you see in the left-hand menu bar. To get that count, we have to create a shortcode:

add_shortcode('cuentaservidoresactivos', 'count_user_posts_function2');
function count_user_posts_function2 ($userid, $post_type ) {
    $user_id = get_current_user_id();
    $totalUser =count_user_posts( $user_id, $post_type = 'wpcd_app_server' );
    return $totalUser;
}

WPCloudDeploy stores metadata for each server in a custom post type. This function just counts the number of entries in that CPT for the logged in user and renders the number to the screen.

Inside of Elementor we just placed that counter where we needed it to go.

Extracting Data From CallBacks

The other place where we needed some custom code was after data was pushed from the server to WPCloudDeploy. We needed to extract certain pieces of data to store them in their own individual fields so that they could be linked up to Advanced Custom Fields.

We modified the following file directly:

wp-cloud-deploy-dev\includes\core\apps\wordpress-app\traits\traits-for-class-wordpress-app\push-commands.php

The functions in this file parses the data pushed from the server and adds it to the WPCloudDeploy custom post type record for the server.

We added our own code to then extract pieces of that data and stuff it into new fields:

This code takes data that’s usually in a single array and a single metafield and breaks it out into multiple fields:

• Total Updates
• Security Updates
• Unattended Updates
• Free Disk Space
• Total Memory
• Used Memory
• Database Size
• Up Time

And more.

[WPCD Editor’s Note: We might need to consider placing an action or filter hook in this location in the code.]

Hooking Up To Advanced Custom Fields & Elementor

Since the data we extracted above is now in their own individual fields, getting Advanced Custom Fields to link up to it is almost trivial.

First, we had to tell ACF that this data existed:

Then, we had to pull individual pieces into Elementor, rendering them where we needed:

In the above image, we’re rendering a horizontal bar that shows the amount of memory used by pulling the data directly from our link with Advanced Custom Fields.

The Final Look

Here’s the full landing page as currently designed:

And the design when the user clicks into a server:

We’ll write another article soon about how we integrated server provider logos and server provider data into our design.

[Editor Note: We can’t tell that this is WPCD – so very cool!]

About The Author

Angel Sebastian Rubio Marotta has been a Full Stack programmer for 15 years. He currently resides in Spain.