The ACF HTML to PHP Converter is a tool that changes static HTML into dynamic PHP code linked with Advanced Custom Fields (ACF). By adding data-acf attributes to your HTML, the converter automatically turns them into PHP, making it easy to connect with ACF fields.
Preview project: Link
To convert your static HTML into dynamic PHP code connected with Advanced Custom Fields (ACF), copy and paste the HTML code below into the app:
Copy the HTML Input below:
<div class="full card-content">
<div class="wrapper">
<img data-acf="top_image" src="/wp-content/uploads/2023/11/orange-crown.svg" alt="">
<h2 data-acf="title">JOIN OUR NETWORK!</h2>
<p data-acf="description">Nine showcase events deliver a world-class experience for not only players and their families, but also fans, coaches, scouts, corporate and media partners, and local economies.</p>
<a data-acf="test_link" href="/about" class="btn hvr-sweep-to-right">ABOUT US</a>
</div>
</div>
Output:
<div class="full card-content">
<div class="wrapper">
<?php
$acf_top_image = get_sub_field('top_image')['url'];
$acf_top_image_alt = get_sub_field('top_image')['alt'];
if (!empty($acf_top_image)) { ?>
<img data-acf="top_image" src="/wp-content/uploads/2023/11/orange-crown.svg" alt="">
<?php } ?>
<?php $acf_title = get_sub_field('title');
if (!empty($acf_title)) { ?>
<h2 data-acf="title"><?= $acf_title; ?></h2>
<?php } ?>
<?php $acf_description = get_sub_field('description');
if (!empty($acf_description)) { ?>
<p data-acf="description"><?= $acf_description; ?></p>
<?php } ?>
<?php $acf_test_link = get_sub_field('test_link');
if (!empty($acf_test_link)) { ?>
<a data-acf="test_link" href="/about" class="btn hvr-sweep-to-right"><?= $acf_test_link; ?></a>
<?php } ?>
</div>
</div>
This conversion ensures that your content remains dynamic and easily editable via the WordPress admin interface, enhancing both flexibility and functionality in your web development projects.
👨💻 Technical Stack:
HTML5
CSS3
JavaScript
jQuery
PHP
Highlight.js
Version Control:
