Creaate news slider from scratch in wp

Here's a step-by-step guide to creating a news slider from scratch in WordPress:

Step 1: Create a new PHP file

Create a new file in your WordPress theme's directory (e.g., wp-content/themes/your-theme) and name it news-slider.php.

Step 2: Define the slider settings

In the news-slider.php file, add the following code to define the slider settings:

<?php
// Define the slider settings
$slider_settings = array(
    'title' => 'News Slider',
    'description' => 'A slider to showcase the latest news',
    'posts_per_page' => 5, // number of posts to display
    'category' => 'news', // category to filter posts by
    'slider_width' => 800, // width of the slider
    'slider_height' => 400, // height of the slider
);

Step 3: Create the slider HTML structure

Add the following code to create the slider HTML structure:

<div class="news-slider">
    <div class="slider-container">
        <ul class="slider-list">
            <!-- slider items will be inserted here -->
        </ul>
    </div>
    <div class="slider-nav">
        <button class="prev-btn">Prev</button>
        <button class="next-btn">Next</button>
    </div>
</div>

Step 4: Retrieve the posts

Add the following code to retrieve the posts:

// Retrieve the posts
$args = array(
    'post_type' => 'post',
    'posts_per_page' => $slider_settings['posts_per_page'],
    'category' => $slider_settings['category'],
);
$query = new WP_Query($args);

Step 5: Loop through the posts and create slider items

Add the following code to loop through the posts and create slider items:

// Loop through the posts
if ($query->have_posts()) {
    while ($query->have_posts()) {
        $query->the_post();
       ?>
        <li class="slider-item">
            <a rel="nofollow" target="_blank" href="<?php the_permalink();?>">
                <img src="<?php the_post_thumbnail_url();?>" alt="<?php the_title();?>">
                <h2><?php the_title();?></h2>
                <p><?php the_excerpt();?></p>
            </a>
        </li>
        <?php
    }
    wp_reset_postdata();
}

Step 6: Add JavaScript and CSS files

Add the following code to enqueue the JavaScript and CSS files:

// Enqueue the JavaScript and CSS files
wp_enqueue_script('news-slider-js', get_template_directory_uri(). '/js/news-slider.js', array('jquery'));
wp_enqueue_style('news-slider-css', get_template_directory_uri(). '/css/news-slider.css');

Step 7: Create the JavaScript file

Create a new file in your WordPress theme's directory (e.g., wp-content/themes/your-theme/js) and name it news-slider.js. Add the following code to create the slider functionality:

// Get the slider container and list
var sliderContainer = document.querySelector('.slider-container');
var sliderList = document.querySelector('.slider-list');

// Get the slider items
var sliderItems = sliderList.children;

// Set the slider width and height
var sliderWidth = sliderSettings.slider_width;
var sliderHeight = sliderSettings.slider_height;

// Set the slider navigation buttons
var prevBtn = document.querySelector('.prev-btn');
var nextBtn = document.querySelector('.next-btn');

// Initialize the slider
var sliderIndex = 0;
var sliderTimeout;

// Function to update the slider
function updateSlider() {
    // Clear the slider container
    sliderContainer.innerHTML = '';

    // Add the current slider item to the container
    sliderContainer.appendChild(sliderItems[sliderIndex]);

    // Update the slider navigation buttons
    prevBtn.disabled = sliderIndex === 0;
    nextBtn.disabled = sliderIndex === sliderItems.length - 1;
}

// Function to handle slider navigation
function handleSliderNavigation(event) {
    if (event.target.classList.contains('prev-btn')) {
        sliderIndex--;
    } else if (event.target.classList.contains('next-btn')) {
        sliderIndex++;
    }

    // Update the slider
    updateSlider();

    // Set the slider timeout
    sliderTimeout = setTimeout(updateSlider, 5000);
}

// Add event listeners to the slider navigation buttons
prevBtn.addEventListener('click', handleSliderNavigation);
nextBtn.addEventListener('click', handleSliderNavigation);

// Initialize the slider
updateSlider();

Step 8: Create the CSS file

Create a new file in your WordPress theme's directory (e.g., wp-content/themes/your-theme/css) and name it news-slider.css. Add the following code to style the slider:

.news-slider {
    position: relative;
    width: <?php echo $slider_settings['slider_width'];?>px;
    height: <?php echo $slider_settings['slider_height'];?>px;
    overflow: hidden;
}

.slider-container {
    position: relative;
    width: 100%;
    height: 100%;
}

.slider-list {
    position: relative;
    width: 100%;
    height: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
}

.slider-item {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

.slider-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.slider-item h2 {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
}

.slider-item p {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 10px;
    color: #fff;
}

.prev-btn,.next-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 24px;
    cursor: pointer;
}

.prev-btn {
    left: 0;
}

.next-btn {
    right: 0;
}

That's it! You now have a basic news slider in WordPress. You can customize the slider settings, CSS, and JavaScript to fit your needs.

NewsBreakers

Creaate news slider from scratch in wp