Here is my functions.php

/**
 * Enqueue scripts and styles.
 */
function maxprofessional_scripts() {
    wp_enqueue_style( 'maxprofessional-style', get_stylesheet_uri(), array(), _S_VERSION );
    wp_enqueue_style( 'maxprofessional-main', get_template_directory_uri() . '/css/main.css' );
    wp_register_script('app-js', get_template_directory_uri() . '/js/app.js', false, '1.0', true);
    wp_enqueue_script( 'app-js' );
    wp_enqueue_style( 'bootstrap-icons', 'https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css' );


    wp_style_add_data( 'maxprofessional-style', 'rtl', 'replace' );

    wp_enqueue_script( 'maxprofessional-navigation', get_template_directory_uri() . '/js/navigation.js', array(), _S_VERSION, true );

    if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
        wp_enqueue_script( 'comment-reply' );
    }
}
add_action( 'wp_enqueue_scripts', 'maxprofessional_scripts' );

And here is the code for the html

<div class="slider">
    <div class="slides">
      <!--Radio Buttons-->
      <input type="radio" name="radio-btn" id="radio1">
      <input type="radio" name="radio-btn" id="radio2">
      <input type="radio" name="radio-btn" id="radio3">
      <input type="radio" name="radio-btn" id="radio4">

      <div class="slide first">
        <img src="/images/1.jpg" alt="">
      </div>

      <div class="slide">
        <img src="/images/2.jpg" alt="">
      </div>

      <div class="slide">
        <img src="/images/3.jpg" alt="">
      </div>

      <div class="slide">
        <img src="/images/4.jpg" alt="">
      </div>

      <!--Automatic Automation Start-->
      <div class="navigation-auo">
        <div class="auto-btn1"></div>
        <div class="auto-btn2"></div>
        <div class="auto-btn3"></div>
        <div class="auto-btn4"></div>
      </div>

    </div>

    <!-- Manual Navigation -->
    <div class="navigation-manual">
      <label for="radio1" class="manual-btn"></label>
      <label for="radio2" class="manual-btn"></label>
      <label for="radio3" class="manual-btn"></label>
      <label for="radio4" class="manual-btn"></label>
    </div>
  </div>

I am a beginner to wordpress so i wanted to know if i have to register or enqueue the path that has my images first because my images are not showing up in the page . Any idea how to fix this , must i do anything in wordpress settings for this to work ?

CodePudding user response：

It depends where your "images" directory is located, but if it is a sub-directory of your theme directory, you can write your filepaths in the php templates as follows to get absolute URLs for your image files:

<img src="<?php bloginfo('stylesheet_directory'); ?>/images/1.jpg" alt="">