Post in popup

<?php
/**
 * Plugin Name: Latest Post Popup
 * Plugin URI: https://yourwebsite.com/ (Optional)
 * Description: Displays the latest post in a popup with a link to the blog page. All in one file.
 * Version: 1.1.0
 * Author: yourkinkz
 * Author URI: https://profiles.ww.wp.xz.cn/yourkinkz
 * License: GPL-2.0-or-later
 * License URI: https://www.gnu.org/licenses/gpl-2.0.html
 * Text Domain: latest-post-popup
 * Domain Path: /languages
 */

if ( ! defined( 'ABSPATH' ) ) {
    exit; // Exit if accessed directly.
}

// Activation hook for default options
register_activation_hook(__FILE__, 'lpp_single_activate');
function lpp_single_activate() {
    $default_options = array(
        'lpp_single_enable' => 0,
        'lpp_single_popup_title' => 'Our Latest News',
        'lpp_single_blog_page_url' => get_option('show_on_front') === 'page' && get_option('page_for_posts') ? get_permalink(get_option('page_for_posts')) : home_url('/blog/'),
        'lpp_single_button_text' => 'Read More on Our Blog',
        'lpp_single_custom_css' => "/* Custom CSS for your popup */\n.lpp-single-popup-content {\n  /* Example: background-color: #f9f9f9; */\n}"
    );
    if (get_option('lpp_single_settings') === false) {
        add_option('lpp_single_settings', $default_options);
    }
}

// Add settings page to admin menu
add_action( 'admin_menu', 'lpp_single_add_admin_menu' );
function lpp_single_add_admin_menu() {
    add_options_page(
        __( 'Latest Post Popup Settings', 'latest-post-popup' ),
        __( 'Latest Post Popup (Single)', 'latest-post-popup' ), // Changed menu title slightly for clarity if both versions were somehow active
        'manage_options',
        'latest_post_popup_single',
        'lpp_single_settings_page_html'
    );
}

// Register plugin settings
add_action( 'admin_init', 'lpp_single_register_settings' );
function lpp_single_register_settings() {
    register_setting( 'lpp_single_settings_group', 'lpp_single_settings', 'lpp_single_sanitize_settings' );

    add_settings_section(
        'lpp_single_general_section',
        __( 'General Settings', 'latest-post-popup' ),
        null,
        'latest_post_popup_single_page' // Page slug for the section
    );

    add_settings_field(
        'lpp_single_enable',
        __( 'Enable Popup', 'latest-post-popup' ),
        'lpp_single_enable_callback',
        'latest_post_popup_single_page', // Page slug
        'lpp_single_general_section'
    );

    add_settings_field(
        'lpp_single_popup_title',
        __( 'Popup Title', 'latest-post-popup' ),
        'lpp_single_popup_title_callback',
        'latest_post_popup_single_page',
        'lpp_single_general_section'
    );

    add_settings_field(
        'lpp_single_blog_page_url',
        __( 'Blog Page URL', 'latest-post-popup' ),
        'lpp_single_blog_page_url_callback',
        'latest_post_popup_single_page',
        'lpp_single_general_section'
    );

    add_settings_field(
        'lpp_single_button_text',
        __( 'Button Text (for Blog Page)', 'latest-post-popup' ),
        'lpp_single_button_text_callback',
        'latest_post_popup_single_page',
        'lpp_single_general_section'
    );
    
    add_settings_field(
        'lpp_single_custom_css',
        __( 'Custom CSS', 'latest-post-popup' ),
        'lpp_single_custom_css_callback',
        'latest_post_popup_single_page',
        'lpp_single_general_section'
    );
}

// Settings field callbacks
function lpp_single_enable_callback() {
    $options = get_option( 'lpp_single_settings' );
    $checked = isset( $options['lpp_single_enable'] ) && $options['lpp_single_enable'] ? 'checked' : '';
    echo '<input type="checkbox" id="lpp_single_enable" name="lpp_single_settings[lpp_single_enable]" value="1" ' . $checked . ' />';
    echo '<p class="description">' . __('Check this box to enable the latest post popup on your site.', 'latest-post-popup') . '</p>';
}

function lpp_single_popup_title_callback() {
    $options = get_option( 'lpp_single_settings' );
    $value = isset( $options['lpp_single_popup_title'] ) ? esc_attr( $options['lpp_single_popup_title'] ) : 'Our Latest News';
    echo '<input type="text" id="lpp_single_popup_title" name="lpp_single_settings[lpp_single_popup_title]" value="' . $value . '" class="regular-text" />';
}

function lpp_single_blog_page_url_callback() {
    $options = get_option( 'lpp_single_settings' );
    $value = isset( $options['lpp_single_blog_page_url'] ) ? esc_url( $options['lpp_single_blog_page_url'] ) : '';
    $placeholder = get_option('show_on_front') === 'page' && get_option('page_for_posts') ? get_permalink(get_option('page_for_posts')) : home_url('/blog/');
    echo '<input type="url" id="lpp_single_blog_page_url" name="lpp_single_settings[lpp_single_blog_page_url]" value="' . $value . '" class="regular-text" placeholder="'. esc_attr($placeholder) .'" />';
    echo '<p class="description">' . __('Enter the full URL of your main blog/archive page.', 'latest-post-popup') . '</p>';
}

function lpp_single_button_text_callback() {
    $options = get_option( 'lpp_single_settings' );
    $value = isset( $options['lpp_single_button_text'] ) ? esc_attr( $options['lpp_single_button_text'] ) : 'Read More on Our Blog';
    echo '<input type="text" id="lpp_single_button_text" name="lpp_single_settings[lpp_single_button_text]" value="' . $value . '" class="regular-text" />';
}

function lpp_single_custom_css_callback() {
    $options = get_option( 'lpp_single_settings' );
    $value = isset( $options['lpp_single_custom_css'] ) ? esc_textarea( $options['lpp_single_custom_css'] ) : '';
    echo '<textarea id="lpp_single_custom_css" name="lpp_single_settings[lpp_single_custom_css]" rows="10" cols="50" class="large-text code">' . $value . '</textarea>';
    echo '<p class="description">' . __('Add your custom CSS here to style the popup. This will be added after the default styles.', 'latest-post-popup') . '</p>';
}

// Sanitize settings
function lpp_single_sanitize_settings( $input ) {
    $sanitized_input = array();
    $sanitized_input['lpp_single_enable'] = isset( $input['lpp_single_enable'] ) ? absint( $input['lpp_single_enable'] ) : 0;
    $sanitized_input['lpp_single_popup_title'] = isset( $input['lpp_single_popup_title'] ) ? sanitize_text_field( $input['lpp_single_popup_title'] ) : '';
    $sanitized_input['lpp_single_blog_page_url'] = isset( $input['lpp_single_blog_page_url'] ) ? esc_url_raw( $input['lpp_single_blog_page_url'] ) : '';
    $sanitized_input['lpp_single_button_text'] = isset( $input['lpp_single_button_text'] ) ? sanitize_text_field( $input['lpp_single_button_text'] ) : '';
    // Basic sanitization for CSS, allows most valid CSS. For extreme security, a stricter parser might be needed.
    $sanitized_input['lpp_single_custom_css'] = isset( $input['lpp_single_custom_css'] ) ? wp_strip_all_tags( stripslashes( $input['lpp_single_custom_css'] ) ) : '';
    return $sanitized_input;
}

// HTML for settings page
function lpp_single_settings_page_html() {
    if ( ! current_user_can( 'manage_options' ) ) {
        return;
    }
    ?>
    <div class="wrap">
        <h1><?php echo esc_html( get_admin_page_title() ); ?></h1>
        <form action="options.php" method="post">
            <?php
            settings_fields( 'lpp_single_settings_group' ); // Option group
            do_settings_sections( 'latest_post_popup_single_page' ); // Page slug
            submit_button( __( 'Save Settings', 'latest-post-popup' ) );
            ?>
        </form>
    </div>
    <?php
}

// Get latest post data and prepare HTML for the popup
function lpp_single_get_popup_data_html() {
    $options = get_option('lpp_single_settings');

    $args = array(
        'posts_per_page' => 1,
        'post_status'    => 'publish',
        'orderby'        => 'date',
        'order'          => 'DESC',
    );
    $latest_post_query = new WP_Query( $args );

    if ( $latest_post_query->have_posts() ) {
        $latest_post_query->the_post();

        $title = get_the_title();
        $excerpt = get_the_excerpt();
        $permalink = get_permalink();
        $featured_image_html = '';
        if ( has_post_thumbnail() ) {
            $featured_image_html = get_the_post_thumbnail( get_the_ID(), 'medium_large', array('alt' => esc_attr($title)) );
        }

        $blog_page_url = !empty($options['lpp_single_blog_page_url']) ? esc_url($options['lpp_single_blog_page_url']) : '';
        $button_text = !empty($options['lpp_single_button_text']) ? esc_html($options['lpp_single_button_text']) : __('Read More on Our Blog', 'latest-post-popup');
        $popup_title_text = !empty($options['lpp_single_popup_title']) ? esc_html($options['lpp_single_popup_title']) : __('Our Latest News', 'latest-post-popup');

        ob_start();
        ?>
        <div id="lpp-single-popup-overlay" class="lpp-single-popup-overlay">
            <div id="lpp-single-popup-content" class="lpp-single-popup-content">
                <button id="lpp-single-close-button" class="lpp-single-close-button" aria-label="<?php esc_attr_e('Close popup', 'latest-post-popup'); ?>">&times;</button>
                <h2><?php echo $popup_title_text; ?></h2>
                <div class="lpp-single-post-item">
                    <?php if ( $featured_image_html ) : ?>
                        <div class="lpp-single-post-thumbnail">
                            <a href="<?php echo esc_url( $permalink ); ?>"><?php echo $featured_image_html; ?></a>
                        </div>
                    <?php endif; ?>
                    <h3 class="lpp-single-post-title"><a href="<?php echo esc_url( $permalink ); ?>"><?php echo esc_html( $title ); ?></a></h3>
                    <div class="lpp-single-post-excerpt">
                        <?php echo wp_kses_post( $excerpt ); ?>
                    </div>
                    <div class="lpp-single-buttons">
                        <a href="<?php echo esc_url( $permalink ); ?>" class="lpp-single-button lpp-single-read-post-button"><?php _e('Read Post', 'latest-post-popup'); ?></a>
                        <?php if ($blog_page_url) : ?>
                        <a href="<?php echo $blog_page_url; ?>" class="lpp-single-button lpp-single-view-blog-button"><?php echo $button_text; ?></a>
                        <?php endif; ?>
                    </div>
                </div>
            </div>
        </div>
        <?php
        $popup_html = ob_get_clean();
        wp_reset_postdata();
        return $popup_html;
    }
    wp_reset_postdata();
    return false;
}

// Add the popup HTML container to the footer
add_action( 'wp_footer', 'lpp_single_render_popup_html_container' );
function lpp_single_render_popup_html_container() {
    $options = get_option( 'lpp_single_settings' );
    if ( ! empty( $options['lpp_single_enable'] ) && $options['lpp_single_enable'] && !is_admin() && ! (defined('DOING_AJAX') && DOING_AJAX) && !defined('REST_REQUEST') ) {
        echo '<div id="lpp-single-popup-container-wrapper"></div>'; // This div will be populated by JS
    }
}

// Print inline styles to head
add_action( 'wp_head', 'lpp_single_print_inline_styles' );
function lpp_single_print_inline_styles() {
    $options = get_option( 'lpp_single_settings' );
    if ( empty( $options['lpp_single_enable'] ) || !$options['lpp_single_enable'] || is_admin() || (defined('DOING_AJAX') && DOING_AJAX) || defined('REST_REQUEST')) {
        return;
    }
    ?>
<style type="text/css" id="lpp-single-default-styles">
    /* Latest Post Popup Styles */
    .lpp-single-popup-overlay {
        display: none; /* Hidden by default, shown by JS */
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.7);
        z-index: 99998;
        justify-content: center;
        align-items: center;
        padding: 20px;
        box-sizing: border-box;
    }

    .lpp-single-popup-content {
        background-color: #ffffff;
        padding: 30px;
        border-radius: 8px;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
        position: relative;
        width: 90%;
        max-width: 600px; /* Adjust as needed */
        max-height: 90vh;
        overflow-y: auto;
        text-align: center; /* Default text alignment */
        box-sizing: border-box;
    }

    .lpp-single-close-button {
        position: absolute;
        top: 10px;
        right: 15px;
        background: none;
        border: none;
        font-size: 28px;
        font-weight: bold;
        color: #333;
        cursor: pointer;
        padding: 0;
        line-height: 1;
    }

    .lpp-single-popup-content h2 {
        margin-top: 0;
        margin-bottom: 20px;
        font-size: 24px;
        color: #333;
    }

    .lpp-single-post-item {
        text-align: left; /* Align post item content to the left */
    }

    .lpp-single-post-thumbnail {
        margin-bottom: 15px;
        text-align: center; /* Center the image */
    }

    .lpp-single-post-thumbnail img {
        max-width: 100%;
        height: auto;
        border-radius: 4px;
        border: 1px solid #eee;
    }

    .lpp-single-post-title {
        font-size: 20px;
        margin-bottom: 10px;
    }

    .lpp-single-post-title a {
        text-decoration: none;
        color: #0073aa; /* WordPress blue */
    }

    .lpp-single-post-title a:hover {
        text-decoration: underline;
    }

    .lpp-single-post-excerpt {
        font-size: 15px;
        color: #555;
        line-height: 1.6;
        margin-bottom: 20px;
    }

    .lpp-single-buttons {
        margin-top: 20px;
        text-align: center; /* Center buttons */
    }

    .lpp-single-button {
        display: inline-block;
        padding: 10px 20px;
        background-color: #0073aa;
        color: #ffffff;
        text-decoration: none;
        border-radius: 4px;
        font-size: 16px;
        margin: 5px;
        transition: background-color 0.3s ease;
        border: none;
        cursor: pointer;
    }

    .lpp-single-button:hover {
        background-color: #005a87;
        color: #ffffff;
    }

    .lpp-single-view-blog-button {
        background-color: #28a745; /* A different color for the main CTA */
    }

    .lpp-single-view-blog-button:hover {
        background-color: #1e7e34;
    }

    /* Example: Make popup slide in from top */
    .lpp-single-popup-content.lpp-animate-in {
        animation: lpp-single-slideInDown 0.5s forwards;
    }

    .lpp-single-popup-content.lpp-animate-out {
        animation: lpp-single-slideOutUp 0.5s forwards;
    }

    @keyframes lpp-single-slideInDown {
        from {
            transform: translateY(-50px);
            opacity: 0;
        }
        to {
            transform: translateY(0);
            opacity: 1;
        }
    }

    @keyframes lpp-single-slideOutUp {
        from {
            transform: translateY(0);
            opacity: 1;
        }
        to {
            transform: translateY(-50px);
            opacity: 0;
        }
    }

    /* Responsive adjustments */
    @media (max-width: 768px) {
        .lpp-single-popup-content {
            padding: 20px;
        }
        .lpp-single-popup-content h2 {
            font-size: 20px;
        }
        .lpp-single-post-title {
            font-size: 18px;
        }
        .lpp-single-post-excerpt {
            font-size: 14px;
        }
        .lpp-single-button {
            font-size: 14px;
            padding: 8px 15px;
        }
    }
</style>
    <?php
    // Custom CSS from settings
    if ( ! empty( $options['lpp_single_custom_css'] ) ) {
        echo '<style type="text/css" id="lpp-single-custom-styles">' . "\n";
        echo $options['lpp_single_custom_css'] . "\n"; // Already sanitized wp_strip_all_tags
        echo '</style>' . "\n";
    }
}

// Print inline script to footer
add_action( 'wp_footer', 'lpp_single_print_inline_script', 20 ); // Higher priority to ensure container exists
function lpp_single_print_inline_script() {
    $options = get_option( 'lpp_single_settings' );
    if ( empty( $options['lpp_single_enable'] ) || !$options['lpp_single_enable'] || is_admin() || (defined('DOING_AJAX') && DOING_AJAX) || defined('REST_REQUEST')) {
        return;
    }

    $popup_html_content = lpp_single_get_popup_data_html();
    if ( ! $popup_html_content ) {
        return; // No post found or error
    }
    
    $lpp_data = array(
        'popup_html' => $popup_html_content,
        // Note: popup_title is now part of the popup_html_content generated by lpp_single_get_popup_data_html()
    );

    ?>
<script type="text/javascript" id="lpp-single-main-script">
    (function($) { // Use a closure to avoid conflicts
        'use strict'; // Enable strict mode

        var lpp_data = <?php echo wp_json_encode($lpp_data); ?>;

        $(document).ready(function() {
            if (typeof lpp_data === 'undefined' || !lpp_data.popup_html) {
                // console.log('LPP Single: Popup data not available or empty.');
                return; 
            }

            if (sessionStorage.getItem('lppSingleShownThisSession')) {
                // console.log('LPP Single: Popup already shown this session.');
                return;
            }

            const popupContainerWrapper = $('#lpp-single-popup-container-wrapper');
            if (popupContainerWrapper.length === 0) {
                // console.error('LPP Single: Popup container wrapper not found.');
                return;
            }
            
            // Inject the HTML into the container wrapper
            popupContainerWrapper.html(lpp_data.popup_html);

            // Now that HTML is injected, select the elements
            const popupOverlay = $('#lpp-single-popup-overlay');
            const popupContent = $('#lpp-single-popup-content');
            const closeButton = $('#lpp-single-close-button');

            function showPopup() {
                if (popupOverlay.length) {
                    popupOverlay.css('display', 'flex'); 
                    if (popupContent.length) {
                        popupContent.addClass('lpp-animate-in').removeClass('lpp-animate-out');
                    }
                    sessionStorage.setItem('lppSingleShownThisSession', 'true');
                    // console.log('LPP Single: Popup shown.');
                }
            }

            function hidePopup() {
                if (popupOverlay.length && popupContent.length) {
                    popupContent.addClass('lpp-animate-out').removeClass('lpp-animate-in');
                    setTimeout(function() {
                        popupOverlay.hide();
                        // console.log('LPP Single: Popup hidden.');
                    }, 480); // Should be slightly less than animation duration to avoid flicker
                } else if (popupOverlay.length) {
                    popupOverlay.hide(); 
                }
            }

            // Show popup after a short delay (e.g., 1.5 seconds)
            setTimeout(showPopup, 1500);

            if (closeButton.length) {
                closeButton.on('click', hidePopup);
            }

            if (popupOverlay.length) {
                popupOverlay.on('click', function(event) {
                    if (event.target === this) { 
                        hidePopup();
                    }
                });
            }

            $(document).on('keydown', function(event) {
                if (event.key === "Escape" || event.keyCode === 27) { // For older browsers
                    if (popupOverlay.is(':visible')) {
                        hidePopup();
                    }
                }
            });
        });
    })(jQuery);
</script>
    <?php
}
?>

Instructions: How to Use This Single-File Plugin

1. Create the Plugin File:
   • Open a plain text editor (like Notepad on Windows, TextEdit on Mac in plain text mode, or a code editor like VS Code, Sublime Text, Atom, etc.).
   • Copy the entire PHP code block provided above.
   • Paste it into your text editor.
   • Save the file with a .php extension, for example: yourkinkz-latest-post-popup.php.
2. Prepare for Upload (Important for WordPress Dashboard):
   • Create a new folder on your computer. You can name it, for example, yourkinkz-latest-post-popup-folder.
   • Place the yourkinkz-latest-post-popup.php file inside this folder.
   • Zip the folder:
     • Right-click on the yourkinkz-latest-post-popup-folder.
     • Choose “Compress” (Mac) or “Send to > Compressed (zipped) folder” (Windows).
     • This will create a file like yourkinkz-latest-post-popup-folder.zip. This is the file you will upload.
3. Upload to WordPress:
   • Log in to your WordPress admin dashboard.
   • Navigate to Plugins > Add New.
   • Click the Upload Plugin button at the top of the page.
   • Click Choose File and select the .zip file you just created (e.g., yourkinkz-latest-post-popup-folder.zip).
   • Click Install Now.
4. Activate the Plugin:
   • After the plugin is installed, click the Activate Plugin button.
5. Configure the Plugin:
   • Once activated, you will find a new menu item in your WordPress admin dashboard under Settings > Latest Post Popup (Single).
   • Click on this menu item to go to the plugin’s settings page.
   • Enable Popup: Check this box to turn the popup on.
   • Popup Title: Set the title you want for your popup.
   • Blog Page URL: Enter the full URL to your main blog page.
   • Button Text (for Blog Page): Customize the text for the button that links to your blog page.
   • Custom CSS: Add your own CSS rules here to further style the popup to match your theme’s design. This CSS will be applied after the plugin’s default styles.
   • Click Save Settings.

The popup should now appear on the frontend of your website (once per user session if enabled), displaying your latest post. You can use the “Custom CSS” field to refine its appearance.

~ Regards Yourkinkz

• This reply was modified 1 year ago by yourkinkz.