Integrate PHP Code into your Divi Web Pages

Jul 7, 2023 | Divi Tips | 0 comments

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();

Need help with this?
Hire me for a consultation and I'll walk you thru the process.

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

5 star reviews
"WOW! Money WELL spent. Joseph was incredibly knowledgeable in helping me make some final tweeks to my Divi website. He was very caring and went above and beyond. Will 100% use him for any future Divi website needs."
Claire - CMMC

5 star reviews
"You really get what you pay for with Joe. He does more than simply build a website, he sets up websites for success. Functional, clean, professional designs and he keeps up/implements the latest plugins and technology. Thank you Joe. I will continue to refer you work."
Mark Winger

5 star reviews
"The best WordPress guy I’ve worked with on WordPress, hands-down (and I’ve worked with dozens). Remarkably good with theme customizations with a quick turn. Kept it on budget as well. A rarity with hourly contracts."
Nate Wright

5 star reviews
"Thanks for your prompt reply. You’re always so comprehensive. If we could write another review just for your communication skills, then we would."
Alex N

More Tips

Ask a Question

"*" indicates required fields