As a beginner in coding, particularly in javascript and jQuery, I am seeking assistance with an issue. I am currently working on developing a WP theme, so all my code is within WP files. I have noticed that code that functions perfectly in an index.html file does not seem to work in my WP theme files, and I haven't been able to pinpoint the reason for this yet. Here's the latest example:
The front page of my theme is divided into three sections using divs. In the third section/div, I want to display different divs based on which button is clicked. Essentially, when Button 1 is clicked, it should show the content of div1 while hiding the others. Similarly, when Button 2 is clicked, the content of div2 should be visible while hiding the other divs. I require a total of four buttons/links and corresponding divs with unique content.
I came across a jQuery code on codepen that almost meets my requirements functionally. (Refer to code below or click here for the original code). When I copied and pasted this code into my html.index files, everything worked as expected just like on codepen. However, upon copying the same code into my WordPress theme files, the jQuery functionality ceased to work. I read that in WP, you cannot directly use $, so I replaced all instances with jQuery. Despite this modification, the code still doesn't run. Can anyone shed light on why this might be happening?
While inspecting this in Chrome, I encountered the following error displayed twice: "Failed to load resource: the server responded with a status of index.js:1 404 (Not Found)".
To verify if jQuery was loading correctly in my WP files, I tested it with a simple code snippet from w3schools and confirmed that it was indeed added to my WP theme without any issues.
Here is the code snippet:
HTML:
<a href="#" class="button">
Button 1
</a>
<a href="#" class="button">
Button 2
</a>
<a href="#" class="button">
Button 3
</a>
<a href="#" class="button">
Button 4
</a>
<div class="content">
<div class="content-1 active">Jana 1 Content</div>
<div class="content-2">Button 2 Content</div>
<div class="content-2">Button 3 Content</div>
<div class="content-2">Button 4 Content</div>
</div>CSS:
a.button {
display:inline-block;
width:100px;
height:50px;
background-color:blue;
color:#fff;
line-height:50px;
text-align:center;
text-decoration: none;
}
a.active {
background-color:red;
}
.content {
margin-top:30px;
}
div[class*="content-"] {
display:none;
}
div.active {
display:block;
}jQuery:
jQuery('.button').first().addClass('active');
jQuery('.button').click(function(){
var jQuerythis = jQuery(this);
jQuerysiblings = jQuerythis.parent().children(),
position = jQuerysiblings.index(jQuerythis);
console.log (position);
jQuery('.content div').removeClass('active').eq(position).addClass('active');
jQuerysiblings.removeClass('active');
jQuerythis.addClass('active');
})
Integration in WP theme:
<?php
function lux_files() {
wp_register_script( "index", plugins_url( "index.js", __FILE__), array( "jquery"));
wp_enqueue_script ( "index");
wp_enqueue_script( "javascript", get_template_directory_uri() . '/index.js', array(), false );
wp_enqueue_style("font-awesome", "https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
wp_enqueue_style("google-fonts", "//fonts.googleapis.com/css?family=Montserrat:400,700|Raleway:400,700&display=swap");
wp_enqueue_style("main_styles", get_stylesheet_uri());
}
add_action('wp_enqueue_scripts', 'lux_files');
function lux_features() {
add_theme_support('title-tag');
}
add_action('after_setup_theme', 'lux_features');
?>