Search code examples
wordpresswidgetwordpress-themingcustom-wordpress-pageswordpress-plugin-creation

My widget plugin broke my custom theme and it display no errors

i'm doing a slideshow widget, it worked good when the code was inside the templates of my custom theme, but, when it's placed on a widget it brokes the rest of my code.

The slideshow isn't displayed or executed on my home.php(blog) template, but it works on my front page and at the customizer view. Also the scripts of my theme stopped working and only was taken the scripts of the slideshow.

I'll let my code here, i'm hopping that somebody could help me finding my mistake.

Thanks.

PHP

<?php
/*
Plugin Name: Slideshow de Posts
Plugin URI:
Description:
Version: 1.0.0
Author: Arturo Valverde
Author URI:
Text Domain:
*/

if (!defined('ABSPATH')) die();

function slideshow_posts_scripts_styles()
{
  wp_enqueue_style('styles', plugins_url() . '/SlideShow/styles/styles.css', '1.0.0');
  wp_enqueue_script('scripts',  plugins_url() . '/SlideShow/scripts/scripts.js', array(), '1.0.0', true);
}
add_action('wp_enqueue_scripts', 'slideshow_posts_scripts_styles');

add_action('widgets_init', function () {
  register_widget('slideshow_posts');
});

class slideshow_posts extends WP_Widget
{

  function __construct()
  {

    $widget_ops = array(
      'classname' => 'slideshow_posts',
      'description' => 'Añade Slideshow de los Posts elegidos',
    );
parent::__construct(
  'slideshow_posts',
  'Slideshow Posts',
  $widget_ops
);
}

public function widget($args, $instance)
{

wp_reset_postdata();
if (post_type_exists('page')) : ?>
  <div class="container">
    <div class="slider full-width">

      <div id="arrow-left" class="arrow overlay-dark">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512">
          <!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. -->
          <path d="M192 448c-8.188 0-16.38-3.125-22.62-9.375l-160-160c-12.5-12.5-12.5-32.75 0-45.25l160-160c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25L77.25 256l137.4 137.4c12.5 12.5 12.5 32.75 0 45.25C208.4 444.9 200.2 448 192 448z" />
        </svg>
      </div>

      <div class="slide-gallery">

        <!-- Cover -->

        <div id="<?php $firstSlide = "slide-1"; echo $firstSlide; ?>" class="slide pageTitle cover full-height full-width" style="background-image: url('<?php echo get_template_directory_uri(); ?>/img/cover.jpg')">

          <div class="overlay-blue full-width padding-5 centrar-flex">

            <div class="contenedor text-center">
              <h1> Fundación Javier Barros Sierra</h1>
            </div>

          </div>

        </div>

        <!-- News -->
        <?php
        isset($firstSlide) ? $i = 1 : $i = 0;
        $query = array(
          'post_type' => 'post',
          'posts_per_page' => 4,
          'orderby' => 'post_date',
          'order' => 'DESC',
          'post_status' => 'publish',
          'category_name' => 'Noticia',
        );

        $wp_query = new WP_Query($query);

        if ($wp_query->have_posts()) : while ($wp_query->have_posts()) : $wp_query->the_post();
            has_post_thumbnail() ? $featured_img = get_the_post_thumbnail_url() : $featured_img = " / "; ?>

            <div id="slide-<?php echo ++$i; ?>" class="slide full-width" style="background-image: url('<?php echo esc_url($featured_img); ?>')">

              <div class="overlay-dark full-width">

                <div class="contenido-slide">
                  <a href="<?php the_permalink(); ?>">
                    <h3><?php the_title(); ?></h3>
                  </a>

                  <span>
                    <?php the_time('l d, F, Y'); ?>
                  </span>

                  <?php the_excerpt(); ?>
                </div>

              </div>

            </div>

        <?php
          endwhile;
        endif;
        ?>

        <div class="slide-selector full-width">
          <ul>
            <!-- Función JS para SlideShow -->
          </ul>
        </div>

      </div>

      <div id="arrow-right" class="arrow overlay-dark">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512">
          <!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. -->
          <path d="M64 448c-8.188 0-16.38-3.125-22.62-9.375c-12.5-12.5-12.5-32.75 0-45.25L178.8 256L41.38 118.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l160 160c12.5 12.5 12.5 32.75 0 45.25l-160 160C80.38 444.9 72.19 448 64 448z" />
        </svg>
      </div>

    </div>
  </div>
<?php
endif;
wp_reset_query(); //reset back to original query
 }
}
?>

CSS

.full-width {
    width: 100%;
    max-width: 100%;
}

.overlay-dark {
    height: 100%;
    max-height: 100%;
    background: rgb(29, 36, 46, .5);
}

.container {
    height: 88vh;
}

.slider {
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    background-color: rgb(var(--colorPrimario));
}

.slider .slide-gallery {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

.slider .slide-gallery .slide {
    height: 100%;
    max-height: 100%;
    position: absolute;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: no-repeat center center;
    background-size: cover;
    opacity: 0;
    transition: opacity .5s ease-in-out .2s;
}

.slider .slide-gallery .slide .overlay-dark {
    height: 40%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.slider .slide-gallery .slide .overlay-dark .contenido-slide {
    width: 60%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    text-align: left;
}

@media(max-width:768px) {
    .slider .slide-gallery .slide .overlay-dark .contenido-slide {
        width: 80%;
    }
}

.slider .slide-gallery .slide .overlay-dark .contenido-slide h3,
.slider .slide-gallery .slide .overlay-dark .contenido-slide p {
    margin: 1rem 0;
    color: rgb(var(--blanco));
    line-height: 1.2;
    transition: .3s ease;
}

.slider .slide-gallery .slide .overlay-dark .contenido-slide a:hover h3,
.slider .slide-gallery .slide .overlay-dark .contenido-slide a:focus h3,
.slider .slide-gallery .slide .overlay-dark .contenido-slide a:active h3 {
    color: rgb(var(--colorComplementario));
    transition: .3s ease;
}

.slider .slide-gallery .slide .overlay-dark .contenido-slide span {
    font-size: 1.4rem;
    text-transform: capitalize;
    color: rgb(var(--colorComplementario2));
}

.slider .slide-gallery .slide .overlay-dark .contenido-slide p {
    margin: 1rem 0;
}

.slider .slide-gallery .slide.active {
    z-index: 3;
    opacity: 1;
    transition: opacity .5s ease-in-out .2s;
}

/* Slider Dots */
.slider .slide-selector {
    width: 15%;
    height: 5rem;
    position: absolute;
    bottom: 0;
    z-index: 4;
    align-self: center;
    opacity: .2;
    transition: opacity .3s ease;
}

@media(max-width:768px) {
    .slider .slide-selector {
        width: 30%;
    }
}


.slider .slide-selector:hover,
.slider .slide-selector:focus,
.slider .slide-selector:active {
    opacity: 1;
    transition: opacity .3s ease;
}

.slider .slide-selector ul {
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
}

.slider .slide-selector ul .crumb-slide {
    width: 1.5rem;
    height: 1.5rem;
    border: 1px solid rgb(var(--blanco));
    border-radius: 50%;
    background-color: transparent;
}

.slider .slide-selector ul .crumb-slide:hover,
.slider .slide-selector ul .crumb-slide:focus,
.slider .slide-selector ul .crumb-slide.active {
    background-color: rgb(var(--blanco));
    transition: background-color ease-in-out .2s;
    cursor: pointer;
}

/* Slideshow Arrows */
.slider .arrow {
    width: 5%;
    max-width: 5%;
    height: 100%;
    max-height: 100%;
    position: absolute;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: .2;
}

@media(max-width:768px) {
    .slider .arrow {
        width: 15%;
        max-width: 15%;
        height: 25%;
        max-height: 25%;
        top: 50;
    }
}

.slider .arrow svg {
    width: 5rem;
    height: 5rem;
    fill: rgba(255, 255, 255, .5);
}

.slider #arrow-left {
    left: 0;
}

.slider #arrow-right {
    right: 0;
}

.slider .arrow:hover,
.slider .arrow:focus {
    opacity: 1;
}

.slider .arrow svg:hover,
.slider .arrow svg:focus {
    cursor: pointer;
    fill: rgb(var(--blanco));
}

JS

const slides = document.querySelectorAll('.slide');
const firstSlide = document.querySelector('.slide');
const slidesCrumbs = document.querySelector('.slide-selector ul');
const leftArrow = document.getElementById('arrow-left');
const rightArrow = document.getElementById('arrow-right');

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

eventListeners();

});

function eventListeners() {

/* SlideShow */
if (slides) {
    sliderInit();
    rightArrow.addEventListener('click', goNextSlide);
    leftArrow.addEventListener('click', goPreviousSlide);
}

firstSlide ? console.log("existe") : console.log("no existe");
/*  slider ? console.log("existe") : console.log("no existe"); */
}

/* Funciones */
/* Slideshow */
var index = 1;

/*Inicialización de elementos del SlideShow*/
function sliderInit() {

let i = 0;
for (let index = 0; index < slides.length; index++) {

    const crumb = document.createElement('li');
    crumb.setAttribute('class', 'crumb-slide');
    crumb.setAttribute('id', 'crumb-' + ++i);
    slidesCrumbs.appendChild(crumb);

    if (crumb.id == 'crumb-1') {
        const firstCrumb = crumb;
        firstCrumb.setAttribute('class', 'crumb-slide active');
    }

    crumb.addEventListener('click', slideSelector);
};

firstSlide.classList.add('active');
setInterval(slideShowTimer, 6000);
}

/*Temporizador del SlideShow*/
function slideShowTimer() {

let nextIndex = ++index;
let lastIndex = nextIndex - 1;

if (nextIndex < slides.length + 1) {

    let nextSlide = document.getElementById('slide-' + nextIndex.toString());
    let nextCrumb = document.getElementById('crumb-' + nextIndex.toString());
    nextSlide.classList.add('active');
    nextCrumb.classList.add('active');

    if (lastIndex != 0) {
        let lastSlide = document.getElementById('slide-' + lastIndex.toString());
        let lastCrumb = document.getElementById('crumb-' + lastIndex.toString());
        lastSlide.classList.remove('active');
        lastCrumb.classList.remove('active');
    }

}

if (nextIndex == slides.length + 1) {
    index = 1
    let lastSlide = document.getElementById('slide-' + lastIndex.toString());
    let lastCrumb = document.getElementById('crumb-' + lastIndex.toString());
    lastSlide.classList.remove('active');
    lastCrumb.classList.remove('active');
    document.getElementById('slide-' + index.toString()).classList.add('active');
    document.getElementById('crumb-' + index.toString()).classList.add('active');
}

}

/*Navegación de SlideShow*/
 function slideSelector(e) {

 document.querySelector('.slide.active').classList.remove('active');
 document.querySelector('.crumb-slide.active').classList.remove('active');

 let crumbId = e.target.id;
 let idArray = crumbId.split('-');
 let idIndex = idArray[1];

 index = idIndex;

 document.getElementById('slide-' + index.toString()).classList.add('active');
 document.getElementById('crumb-' + index.toString()).classList.add('active');

}

function goNextSlide() {

const currentSlide = document.querySelector('.slide.active');

let slideId = currentSlide.id;
let idArray = slideId.split('-');
let idIndex = idArray[1];

let nextId = Number(idIndex) + 1;
let lastId = Number(nextId) - 1;

if (nextId != slides.length + 1) {

    document.getElementById('slide-' + lastId.toString()).classList.remove('active');
    document.getElementById('crumb-' + lastId.toString()).classList.remove('active');

    document.getElementById('slide-' + nextId.toString()).classList.add('active');
    document.getElementById('crumb-' + nextId.toString()).classList.add('active');

    index = nextId;

} else {

    document.getElementById('slide-' + lastId.toString()).classList.remove('active');
    document.getElementById('crumb-' + lastId.toString()).classList.remove('active');

    document.getElementById('slide-' + 1).classList.add('active');
    document.getElementById('crumb-' + 1).classList.add('active');

    index = 1;

}

}

function goPreviousSlide() {

const currentSlide = document.querySelector('.slide.active');

let slideId = currentSlide.id;
let idArray = slideId.split('-');
let idIndex = idArray[1];

let previousId = Number(idIndex) - 1;
let nextId = Number(previousId) + 1;

if (previousId != 0) {

    document.getElementById('slide-' + nextId.toString()).classList.remove('active');
    document.getElementById('crumb-' + nextId.toString()).classList.remove('active');

    document.getElementById('slide-' + previousId.toString()).classList.add('active');
    document.getElementById('crumb-' + previousId.toString()).classList.add('active');

    index = previousId;

} else {

    document.getElementById('slide-' + nextId.toString()).classList.remove('active');
    document.getElementById('crumb-' + nextId.toString()).classList.remove('active');

    document.getElementById('slide-' + slides.length).classList.add('active');
    document.getElementById('crumb-' + slides.length).classList.add('active');

    index = slides.length;

}

}
Solution

  • I found the problem, I don't know why but apparently, the issue was caused because I named the widget zone as "slideshow_widget", that causes that my plugin wasn't executed. Also the issue that caused that my scripts weren't taken, was that the script sheet of my plugin had the same name that my script sheet of my custom theme and also, this line of my JS was causing that despite my two scripts has executed, the plugin script didn't worked:

    document.addEventListener('DOMContentLoaded', function () {}

    I repeat that I don't know why that happened but, I just change the names of my widget zone and my script sheet and the problem was solved.