If you find yourself wanting to incorporate unique functionality into your web pages using Divi, you may encounter situations where the desired feature is not available as a Divi module. However, you can still leverage the existing data to achieve your goal. Let me demonstrate an example inspired by the Divi PHP Code Module developers at https://divibooster.com/divi-php-code-module/. I have implemented this technique on my website, specifically on the top section of my blog category pages, which you can see here: https://diviguy.com/category/divi-tips/.
Take note of the following text: “As of [date], Divi Guy has written [xx] posts and received [xx] comments (so far).” This dynamic information is made possible by utilizing the Divi PHP Code Module, available at https://divibooster.com/divi-php-code-module/. The module is priced at $19 without any recurring fees. If you choose to hire me, I will provide you with this plugin for free, as I possess an Unlimited Sites license.
With the Divi PHP Code Module, you can now write your own PHP code to implement various functionalities. Upon installation, a new PHP Code Divi module will be added to your list of modules, which offers convenient styling options for the code output.
Below, you’ll find the code used to display the aforementioned dynamic text.
Additionally, I’ve been experimenting with a fun feature that involved creating a simple Lightbox gallery for the Divi Projects post type. The goal was to have a list of featured images that open in a Lightbox when clicked. Since there are no existing Divi modules designed for this purpose, I decided to explore other options.
Using the GPT Chat AI available at https://chat.openai.com/, I provided the necessary parameters and asked it to generate the code. It took several attempts before I achieved the desired result, along with minimal CSS styling. However, to make it work, I had to include the Lightbox CSS and JS files from Cloudflare, as the AI couldn’t figure out how to accomplish this using native Divi code.
You can view the page featuring this code here: https://diviguy.com/web-design-portfolio-gallery-style/. Although it still requires some refinement, it was an enjoyable project to work on. As a result, the only link to this page is available right here.
I’m delighted to have another option at my disposal, allowing me to write custom PHP code or even utilize AI-generated code when needed. I’m eager to have the opportunity to implement this on a client’s website soon.
If you have any examples to share, feel free to leave a comment below!
<?php
// Query Divi portfolio posts
$args = array(
'post_type' => 'project',
'posts_per_page' => -1, // Get all portfolio posts
);
$portfolio_query = new WP_Query($args);
if ($portfolio_query->have_posts()) :
?>
<style>
.portfolio-gallery {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
}
.portfolio-item {
flex: 0 0 calc(100% / 4);
max-width: calc(100% / 4);
text-align: center;
position: relative;
background-color: transparent;
overflow: hidden;
padding: 10px;
border: 10px solid transparent;
border-radius: 20px;
}
@media (max-width: 1200px) {
.portfolio-item {
flex-basis: calc(100% / 3);
max-width: calc(100% / 3);
}
}
@media (max-width: 767px) {
.portfolio-item {
flex-basis: calc(100% / 2);
max-width: calc(100% / 2);
}
}
.portfolio-item a {
display: block;
position: relative;
border-radius: 10px;
overflow: hidden;
transition: transform 0.3s ease;
}
.portfolio-item a:hover {
transform: scale(1.05);
}
.portfolio-item img {
display: block;
width: 100%;
height: auto;
object-fit: cover;
}
.portfolio-title {
margin-top: 10px;
color: #fff;
font-size: 15px;
}
.lightbox {
z-index: 9999;
top: 25% !important;
left: 50%;
}
@media (max-width: 767px) {
.lightbox {top: 10% !important;}
}
.lb-nav a.lb-prev, .lb-nav a.lb-next {
filter: alpha(Opacity=1) !important;
opacity: 1 !important;
filter: brightness(50%) !important;
}
</style>
<div id="portfolio-gallery" class="portfolio-gallery">
<?php
while ($portfolio_query->have_posts()) :
$portfolio_query->the_post();
$image_id = get_post_thumbnail_id();
$image_url = wp_get_attachment_image_src($image_id, 'large')[0];
$thumbnail_url = wp_get_attachment_image_src($image_id, 'thumbnail-1024')[0];
$title = get_the_title();
?>
<div class="portfolio-item">
<a href="<?php echo $image_url; ?>" data-lightbox="portfolio" data-title="<?php echo esc_attr($title); ?>">
<img src="<?php echo $thumbnail_url; ?>" alt="<?php echo esc_attr($title); ?>">
</a>
<div class="portfolio-title"><?php echo $title; ?></div>
</div>
<?php endwhile; ?>
</div>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/css/lightbox.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/js/lightbox.min.js"></script>
<script>
lightbox.option({
'resizeDuration': 200,
'wrapAround': true,
'imageFadeDuration': 500,
'showImageNumberLabel': false,
'disableScrolling': true,
'fitImagesInViewport': true,
'maxWidth': 1200,
'maxHeight': 800,
'alwaysShowNavOnTouchDevices': true,
'imageClickClose': false,
});
</script>
<?php
endif;
// Reset post data
wp_reset_postdata();
0 Comments