CSS Animation

Unfold Effect

Magnify Effect

Copy Code:

				
					 .slick-slide {
  transition: all 0.5s ease;
  transform: scale(1.2);
  padding: 10px;
}

 .slick-slide:not(.slick-center) {
  transition: all 0.5s ease;
  transform: scale(0.75);
  
}
				
			

Fill Out Fields to Activate Button

Copy Code (faded):

				
					<script>

window.addEventListener('DOMContentLoaded', function() {

    var requiredInputs = document.querySelectorAll('.formx form [required]'),
        checkBoxInputs = document.querySelectorAll('.formx form input[type="checkbox"][required]'),
        formSubmits = document.querySelectorAll('.formx form button[type="submit"]');

    const disableSubmitButtons = function(){

        for (submit of formSubmits) {
           submit.setAttribute('disabled', '');
submit.style.opacity = 0.5;

        }  
    }

    const enableSubmitButtons = function(){

        for (submit of formSubmits) {
            submit.removeAttribute('disabled');
            submit.removeAttribute('style');
        }
    }

    const isEveryInputEmpty = function() {
        
        for (const input of requiredInputs)  if (input.value === '') return true;

    }

    const isEveryCheckboxEmpty = function() {
        
        for (const input of checkBoxInputs) if (input.checked == false) return true;

    }

    disableSubmitButtons();

    requiredInputs.forEach(function(elem) {
        
        elem.addEventListener("input", function() {

            ( ! isEveryInputEmpty() && ! isEveryCheckboxEmpty() ) ? enableSubmitButtons() : disableSubmitButtons();

        });
    });


});

jQuery( document ).ready(function( $ ){
	$( document ).on('submit_success', function(){
	   

        $('.e-form__buttons button').css("opacity", "0.5");
        
               $('.e-form__buttons button').attr("disabled","disbaled");
        
	});
});

</script>
				
			

Copy Code (grey):

				
					<script>

window.addEventListener('DOMContentLoaded', function() {

    var requiredInputs = document.querySelectorAll('.formx form [required]'),
        checkBoxInputs = document.querySelectorAll('.formx form input[type="checkbox"][required]'),
        formSubmits = document.querySelectorAll('.formx form button[type="submit"]');

    const disableSubmitButtons = function(){

        for (submit of formSubmits) {
           submit.setAttribute('disabled', '');
submit.style.opacity = 0.5;
submit.style.backgroundColor += '#615f5f';
        }  
    }

    const enableSubmitButtons = function(){

        for (submit of formSubmits) {
            submit.removeAttribute('disabled');
            submit.removeAttribute('style');
        }
    }

    const isEveryInputEmpty = function() {
        
        for (const input of requiredInputs)  if (input.value === '') return true;

    }

    const isEveryCheckboxEmpty = function() {
        
        for (const input of checkBoxInputs) if (input.checked == false) return true;

    }

    disableSubmitButtons();

    requiredInputs.forEach(function(elem) {
        
        elem.addEventListener("input", function() {

            ( ! isEveryInputEmpty() && ! isEveryCheckboxEmpty() ) ? enableSubmitButtons() : disableSubmitButtons();

        });
    });


});

jQuery( document ).ready(function( $ ){
	$( document ).on('submit_success', function(){
	   

        $('.e-form__buttons button').css("opacity", "0.5");
        $('.e-form__buttons button').css("background-color", "rgb(97, 95, 95)");
       $('.e-form__buttons button').attr("disabled","disbaled");
        
	});
});

</script>
				
			

Form to Message

Copy Code:

				
					<script type 
= "text/javascript">
    
    jQuery( document ).ready(function( $ ){
	$( '.formx' ).on('submit_success', function(){
	   

jQuery('.thankscon').show();
jQuery('.formx').hide();
;
name = jQuery('#form-field-yourname').val();
jQuery('#custom-name').show();
        
jQuery('#custom-name h2').text(name);
        
	});
});
    
</script>
				
			

Copy CSS:

				
					.thankscon {display:none;}
				
			

Keyboard Block Fix

Copy Code (faded):

				
					<script>
window.addEventListener('DOMContentLoaded', function() {

var scrollTopOnCustomScrollTarget = function( scrollTarget, selector ){

    if( scrollTarget ){

        var currSelector = selector ? selector + ' input[type="search"]' : "form input[type='search']";

        document.querySelector(currSelector).addEventListener('focus', function(){

           if( window.innerWidth < 1024 ) window.scroll(0, scrollTarget);

        });

    }
}

scrollTopOnCustomScrollTarget(300, ".searchbar");


});
</script>
				
			

Custom Loader

JET FORM BUILDER

Media placeholder code:

				
					<style>
.jet-form-builder-file-upload__content {
    background: url(https://filenewcreate.com/wp-content/uploads/2023/07/Artboard-1-2.png) no-repeat center / contain;
}

.jet-form-builder-file-upload__content.hide-placeholder {
    background: transparent;
}    
</style>

<script>
window.addEventListener("DOMContentLoaded", (event) => {
    var input = document.querySelector('input#image');
    
    if(input){
    
    input.addEventListener("change", function () {
      var content = document.querySelector('.jet-form-builder-file-upload__content');

 
    if( this.files.length > 0 ) {
        content.classList.add('hide-placeholder');
    
        setTimeout(function(){
            
           var fileRemove = document.querySelector('.jet-form-builder-file-upload__file-remove');
            fileRemove.addEventListener('click', function(){
            content.classList.remove('hide-placeholder');
            
            });
            
            
        },50);

    }
    
    })
    
    }
});

</script>
				
			

Select field css:

				
					.select2-container .select2-selection--single {
    cursor: pointer !important;
    display: block !important;
    height: 45px !important;
    user-select: none !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 40px !important;
    position: absolute;
    top: 1px;
    right: 1px;
    width: 20px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #000000 !important;
    line-height: 38px !important;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #000000 !important;
}

				
			

FLOATING LABELS

Copy Code:

				
					    <style>
        /*Label Position normal state*/
        label:not(.elementor-field-type-checkbox label):not(.elementor-field-type-acceptance label):not(.elementor-field-type-radio label) {
            position: absolute;
            left: 1.1rem;
            top: 0.70rem;
        }

        /*Label Position on Focus state*/
        label.focused:not(.elementor-field-type-checkbox label):not(.elementor-field-type-acceptance label):not(.elementor-field-type-radio label) {
            top: -1rem; /* Change how high the label moves up  */
            background: white; /* Change background color (label)) */
            padding: 2px 8px;
            margin: 2px -10px; /* Change position  (label)) */
            border-radius: 3px;
            font-size: 120%;  /* Change font size (label)) */
            color: blue; /* Change label text color */
            transition: all 0.2s ease;
        }

        /* Scale the label on focus */
        label.focused:hover:not(.elementor-field-type-checkbox label):not(.elementor-field-type-acceptance label):not(.elementor-field-type-radio label) {
            transform: scale(1.1); /* Scale on focus */
        }

        /* Add border color on focus for input and textarea */
        .elementor-field-group .elementor-field-textual:focus {
            border-color: blue;
            border-width: 1px;
            border-style: solid;
        }

        /*transition*/
        .focused, label, input, textarea:focus {
            transition: all 0.2s ease;
        }
    </style>


    <script>
        document.addEventListener("DOMContentLoaded", function () {
            document.body.addEventListener("focusin", function (event) {
                var target = event.target;
                if (target.matches("input, textarea")) {
                    var label = target.closest(".elementor-field-group").querySelector("label");
                    if (label) {
                        label.classList.add("focused");
                    }
                }
            });

            document.body.addEventListener("focusout", function (event) {
                var target = event.target;
                if (target.matches("input, textarea")) {
                    var label = target.closest(".elementor-field-group").querySelector("label");
                    if (label) {
                        var inputValue = target.value.trim();
                        label.classList.toggle("focused", inputValue !== "");
                    }
                }
            });
        });
    </script>



				
			

PUBLISH ALL POSTS

css class(button) : publish-all-posts

css class(html) : publish-all-posts-html

html code:

				
					<form method="POST">
    <button type="submit" name="publish-posts" class="publish-posts" style="display: none;">Publish All Pending Posts</button>
</form>


				
			

php code:

				
					function change_custom_post_status() {
    // Check if the button with the ID "publish-posts" was clicked
    if (isset($_POST['publish-posts'])) {
        // Query for posts with the "your-post-type" custom post type and "Pending Review" status
        $args = array(
            'post_type' => 'your-post-type', // Replace 'your-post-type' with your actual custom post type name
            'post_status' => 'pending',
            'posts_per_page' => -1,
        );

        $pending_posts = new WP_Query($args);

        // Loop through each pending post and update its status to "Published"
        if ($pending_posts->have_posts()) {
            while ($pending_posts->have_posts()) {
                $pending_posts->the_post();
                $post_id = get_the_ID();
                wp_update_post(array(
                    'ID' => $post_id,
                    'post_status' => 'publish',
                ));
            }
        }

        // Reset post data
        wp_reset_postdata();

        // Redirect back to the page where the button was clicked
        wp_redirect($_SERVER['HTTP_REFERER']);
        exit;
    }
}
add_action('init', 'change_custom_post_status');

function custom_inline_scripts() {
    echo '<style>
        .publish-all-posts-html {
            display: none;
        }
    </style>';
    // Add the JavaScript directly in the header
    echo '<script type="text/javascript">
        jQuery(document).ready(function($) {
            // Attach a click event handler to the "publish-all-posts" button
            $(document).on("click", ".publish-all-posts", function() {
                // Trigger a click event on the "publish-all-posts-html" button
                $(".publish-posts").click();
            });
        });
    </script>';
}
add_action('wp_head', 'custom_inline_scripts');

				
			

Form Design

DUPLICATE PAGE

php code:

				
					function duplicate_post_link( $actions, $post ) {
    if ( current_user_can( 'edit_posts' ) ) {
        $url = admin_url( 'admin-ajax.php?action=clone_post&post_id=' . $post->ID );
        $actions['duplicate'] = '<a href="' . esc_url( $url ) . '">Duplicate</a>';
    }
    return $actions;
}

function duplicate_post_ajax() {
    if ( isset( $_GET['action'] ) && $_GET['action'] == 'clone_post' && isset( $_GET['post_id'] ) ) {
        $post_id = intval( $_GET['post_id'] );
        $new_post_id = duplicate_post( $post_id );
        if ( $new_post_id ) {
            // Redirect to the same page after duplicating
            wp_safe_redirect( wp_get_referer() );
            exit;
        }
    }
}

add_filter( 'page_row_actions', 'duplicate_post_link', 10, 2 );
add_action( 'wp_ajax_clone_post', 'duplicate_post_ajax' );
add_action( 'wp_ajax_nopriv_clone_post', 'duplicate_post_ajax' );

function duplicate_post( $post_id ) {
    $post = get_post( $post_id );
    if ( isset( $post ) && $post != null ) {
        $new_post = array(
            'post_title' => $post->post_title . ' (Copy)',
            'post_content' => $post->post_content,
            'post_status' => $post->post_status,
            'post_type' => $post->post_type,
        );
        $new_post_id = wp_insert_post( $new_post );
        if ( $new_post_id ) {
            // Duplicate post metadata (optional)
            $post_meta = get_post_meta( $post_id );
            foreach ( $post_meta as $key => $value ) {
                update_post_meta( $new_post_id, $key, $value[0] );
            }
            return $new_post_id;
        }
    }
    return 0;
}

				
			

ltr slider

css class : slider-direction-change

php Code:

				
					add_filter( 'jet-engine/listing/grid/slider-options', function( $slider_options, $listing_settings ) {
if ( false !== strpos( $listing_settings['_css_classes'] ?? '', 'slider-direction-change' ) ) {
$slider_options['rtl'] = ! $slider_options['rtl'];
}
return $slider_options;
}, 0, 2 );
				
			

vertical scrollbar

css class(container) : scrollcon

css code:

				
					.scrollcon {
  max-height: 40vh; /* Set the maximum height of the container to 60% of the viewport height */
  overflow-x: hidden;/* Prevent horizontal scrolling */
  overflow-y: scroll;/* Enable vertical scrolling within the container when content exceeds its height */
  border: 1px solid #ccc; /* Border style for the container */
  border-radius: 10px; /* Applies a border-radius to the scrollbar track */
}

.scrollcon::-webkit-scrollbar {
  width: 14px;/* Sets the width of the scrollbar */
}

.scrollcon::-webkit-scrollbar-track {
  background: BLACK; /* Sets the background color of the scrollbar track */
  border-radius: 10px; /* Applies a border-radius to the scrollbar track */
}

.scrollcon::-webkit-scrollbar-thumb {
  background: blue; /* Sets the background color of the scrollbar thumb */
  border-radius: 10px; /* Applies a border-radius to the scrollbar thumb */
}

				
			

New User Approval

copy Code:

				
					// Step 1: Approve all existing users (run once on load)
function approve_existing_users() {
    $users = get_users(array(
        'meta_key' => 'is_approved',
        'meta_compare' => 'NOT EXISTS'
    ));

    foreach ($users as $user) {
        update_user_meta($user->ID, 'is_approved', 1);
    }
}
approve_existing_users();

// Step 2: Add approval status to newly registered users
function add_user_approval_meta($user_id) {
    if (!get_user_meta($user_id, 'is_approved', true)) {
        add_user_meta($user_id, 'is_approved', 0, true);
    }
}
add_action('user_register', 'add_user_approval_meta');

// Step 3: Prevent non-approved users from logging in
function prevent_non_approved_user_login($user, $username, $password) {
    $user_data = get_user_by('login', $username);

    if ($user_data && get_user_meta($user_data->ID, 'is_approved', true) != 1) {
        wp_redirect('https://filenewcreate.com/account-panding/');
        exit;
    }
    return $user;
}
add_filter('authenticate', 'prevent_non_approved_user_login', 30, 3);

// Step 4: Add "Approval Status" column in admin user list
function add_approval_column($columns) {
    $columns['approval_status'] = __('Approval Status');
    return $columns;
}
add_filter('manage_users_columns', 'add_approval_column');

// Step 5: Show approval status and approve button
function show_approval_status($value, $column_name, $user_id) {
    if ('approval_status' == $column_name) {
        $is_approved = get_user_meta($user_id, 'is_approved', true);
        if ($is_approved == 1) {
            return __('Approved');
        } else {
            $current_url_param = (isset($_GET['is_approved']) && $_GET['is_approved'] === 'pending') ? '&is_approved=pending' : '';
return '<a href="' . admin_url('users.php?approve_user=' . $user_id . $current_url_param) . '" style="display: inline-block; padding: 5px 10px; background-color: #0073aa; color: white; text-decoration: none; border-radius: 3px;">Approve</a>';

        }
    }
    return $value;
}
add_filter('manage_users_custom_column', 'show_approval_status', 10, 3);

// Step 6: Handle approval action
function approve_user() {
    if (isset($_GET['approve_user']) && current_user_can('manage_options')) {
        $user_id = intval($_GET['approve_user']);
        update_user_meta($user_id, 'is_approved', 1);

        // Check if we're coming from the pending filter tab
        $redirect_url = admin_url('users.php');
        if (isset($_GET['is_approved']) && $_GET['is_approved'] === 'pending') {
            $redirect_url = add_query_arg('is_approved', 'pending', $redirect_url);
        }

        wp_redirect($redirect_url);
        exit;
    }
}

add_action('admin_init', 'approve_user');

// Step 7: Notify users when approved
function notify_user_approval($user_id) {
    $user = get_userdata($user_id);
    $email = $user->user_email;
    $subject = 'Your account has been approved!';
    $message = 'Congratulations! Your account on ' . get_bloginfo('name') . ' has been approved. You can now <a href="https://filenewcreate.com/register-basic-2/">log in</a>.';

    $headers = array(
        'From: ' . get_bloginfo('name') . ' <no-reply@' . $_SERVER['SERVER_NAME'] . '>',
        'Content-Type: text/html; charset=UTF-8'
    );

    wp_mail($email, $subject, $message, $headers);
}
function maybe_notify_user($meta_id, $user_id, $meta_key, $meta_value) {
    if ($meta_key == 'is_approved' && $meta_value == 1) {
        notify_user_approval($user_id);
    }
}
add_action('updated_user_meta', 'maybe_notify_user', 10, 4);

// Step 8: Make Approval Status column sortable
function make_approval_column_sortable($columns) {
    $columns['approval_status'] = 'approval_status';
    return $columns;
}
add_filter('manage_users_sortable_columns', 'make_approval_column_sortable');

// Step 9: Handle sorting logic
function approval_status_orderby($query) {
    if (!is_admin()) {
        return;
    }

    $orderby = $query->get('orderby');
    if ($orderby == 'approval_status') {
        $query->set('meta_key', 'is_approved');
        $query->set('orderby', 'meta_value');
    }
}
add_action('pre_get_users', 'approval_status_orderby');

// Step 10: Add "Pending" filter to Users list in admin
function add_pending_filter_to_users($views) {
    $pending_count = count_users_by_meta_key('is_approved', '0');
    $current = (isset($_GET['is_approved']) && $_GET['is_approved'] === 'pending') ? 'current' : '';
    $views['pending'] = '<a href="' . admin_url('users.php?is_approved=pending') . '" class="' . $current . '">'
        . __('Pending') . ' <span class="count">(' . $pending_count . ')</span></a>';
    return $views;
}
add_filter('views_users', 'add_pending_filter_to_users');

// Step 11: Filter users by "Pending" status in admin
function filter_users_by_pending_status($query) {
    if (is_admin() && isset($_GET['is_approved']) && $_GET['is_approved'] === 'pending') {
        $query->set('meta_key', 'is_approved');
        $query->set('meta_value', '0');
    }
}
add_action('pre_get_users', 'filter_users_by_pending_status');

// Step 12: Helper function to count users by meta key/value
function count_users_by_meta_key($meta_key, $meta_value) {
    global $wpdb;
    $query = $wpdb->prepare("
        SELECT COUNT(*)
        FROM $wpdb->usermeta
        WHERE meta_key = %s AND meta_value = %s
    ", $meta_key, $meta_value);
    return (int) $wpdb->get_var($query);
}
				
			

unfold effect(text)

css class(text editor) : your-text-editor-selector

css class(button) : your-button-selector

copy code:

				
					<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
jQuery(document).ready(function($) {
    // Initial state
    var isExpanded = false;
    var $textEditor = $('.your-text-editor-selector'); // Ensure this is your actual selector
    var $button = $('.your-button-selector a'); // Ensure this is your actual button selector

    // Apply initial blur and height restriction
    $textEditor.css({
        'max-height': '50px',
        'filter': 'blur(0px)',
        'overflow': 'hidden'
    });
    
     // Button hover effect
    $button.hover(
        function() {
            $(this).css('cursor', 'pointer'); // Set cursor to pointer on hover
        },
        function() {
            $(this).css('cursor', 'auto'); // Reset cursor to default when not hovering
        }
    );

    // Button click action
    $button.click(function() {
        if (isExpanded) {
            // Collapse and re-apply blur
            $textEditor.css('filter', 'blur(0px)'); // Immediately re-apply blur
            $textEditor.animate({maxHeight: '50px'}, 500); // Animate height change
            isExpanded = false;
            $button.text('read More'); // Optionally change button text
        } else {
            // Expand and remove blur immediately
            $textEditor.css('filter', 'none'); // Immediately remove blur
            var fullHeight = $textEditor.prop('scrollHeight') + 'px';
            $textEditor.animate({maxHeight: fullHeight}, 500); // Animate height change
            isExpanded = true;
            $button.text('read Less'); // Optionally change button text
        }
    });
});
</script>

				
			

Magic Button

Highlight word on scroll

Sign up & Login

Icon list-icon position

css class : move-icon-right

copy code:

				
					.move-icon-right .elementor-icon-list-icon {
    order: 1;
    margin-left: 3px;
}

				
			
Scroll to Top