I'm trying to figure out how to get ANY Javascript to work and where to place the files.
I tried several ways but what is the most logical way? I've been trying for a week, but since I can't find a tutorial on it, I'm going to assume it's embarrassingly easy.
I'm just trying to understand where to put which files before I venture further into this coding journey.
Any help is much much appreciated!
What I've done so far:
I created a Childtheme and added the hook-code to the functions.php file (see image)
There seem to be double code here but I'm not sure
I acquired the files for a .js slider (tried several) but I'm not sure where to put the code/files
The HTML I put in a HTML widget top of page, the CSS I put in Wordpress' 'Additional CSS' and the Javascript I put in the functions.php between the brackets.
I also tried to add the code files in the ChildTheme folder but also didn't work
In wordpress you have no real place for javascript files, that means that you are quite free to place them where u feel beeter.
That said, it is common to have inside your child theme a "js" folder, which could be in the root of the child theme like:
mychildtheme/js or
mychildtheme/assets/js or
mychildtheme/public/js
Once u've picked one of those, all you have to do is this:
add_action( 'wp_enqueue_scripts', 'my_custom_scripts' );
function my_custom_scripts(){
wp_enqueue_script('my_custom_script',get_stylesheet_directory_uri()."/[yourpath]/yourfile.js",['jquery','anyotherdeps'],false,true);
}
Which is documented here: https://developer.wordpress.org/reference/functions/wp_enqueue_script/
Related
I have 3 folders:
Admin
Home
Profile
Each folders have different css, js, and php files in it with more than 1000 lines, so that's why I kept them in separate folders.
But now I want to manage the whole indexes is one, so I made another php file with name All.php and I made a radio button in it to show and hide these three files (admin, home and profile).
I have tried to include these files by ?php include(filename.php) ? method, but the css wasn't working with it.
Then I copied the css and js link files from the Admin.php to All.php and it was working fine.
But the problem is when I copied more files(css and js links) with different names to All.php, some conflicts appear, and the style of Admin.php got shattered.
I don't know whats wrong with it, and it's same with jquery.load() method. The css doesn't work in All.php when I load a file from three of these, and when here too I copied the links and sources then, many of the functionalities were not working.
Look up cascade, inheritance and specificity. You possibly have conflicting selectors in css files. What kind of functionalities are not working? Need code for that!
I have downloaded a responsive bootstrap website template. It has a lot more extra content and js files that i don't need for my website. I want to remove it along with .js file being used for that content. Is there any plugin or way to find out which js file is being used on which content so that i could make changes accordingly ??
Thanks,
Any help is appreciated...
Have you looked at this question.
I believe you should be able to find out something that should help you in the answer to that question
find unused images, css rules, js script blocks
I am attempting to add a javascript overlay onload, without direct access to the html. I'm only able to upload .js and .css files.
How would I go about doing this, I've searched all over, but as I am no expert at this I'm seeking a simple solution which will allow me to maybe call html and insert it into an overlay, by using javascript only.
I am unsure of the coding of the .js file to contain all of the overlay code and html code combined.
I've been looking at document.getElementById and document.write to do this, am I correct in trying to do it this way?
Any suggestions?
There is no way you can add an overlay to an existing html file without importing the new JS and CSS files in the html file. How ever, if there are other JS files used or imported to the HTML file, edit it and add your code in the JS file. It'll run since the JS file is already imported in the HTML.
I am a very new user of Drupal and want to add this menu to my website. It has the HTML code with a CSS file, two .js files and a few images.
I want to embed this code in a block into my Responsinve blog themed Drupal7 site
I don't even know where to start or end.I tried drupal_add_js but I think I missed something somewhere and reading the forums has got me all the more confused.
In short I need to understand every small point of how and where to make changes to my site folders.
Any help would be highly appreciated.
You dont need to add your js & css in the template file.
When you go into sites/all/themes/your_theme_name
Look for a file that ends with .info
Best practice is to add all of your custom .js & css files there.
All HTML changes will be done in the .tpl template files.
Hope this helps.
The easiest way to do add js is:
Locate your theme folder, usually /themes/your_theme_name or /sites/all/themes/your_theme_name
Look for template.php in it
Look for your_theme_preprocess_html() function - 'your_theme' might be, 'bartik' or 'garland' or your theme name, if not - change it (usually, it's the name of the folder)
add `drupal_add_js('path_to_js') to function
That's it, clear your cache in Admin > Config > Perfomance and check your code
oh, and to add menu block,
Structure > Menu and create new menu or use existant, add menu items
go to Structure > Blocks, find your menu in list and select region for it
p.s.
and, yep, it's not the only way to add js, here you can find at least 7 ways to do it
Here is my issue: I have an HTML template that has CSS, JS and some IMAGES attached to it. I converted it to a wordpress theme by following the very basic and simple instructions here: http://thethemefoundry.com/blog/html-wordpress/ . In order for the images to show, I have to upload them to the WP library and then change the links in the index.php and other files so they point not to /img/picture.jpg, but to www.sitename.com/wp-uploads/2012/11/picture.jpg.
When I do that, the pictures show just fine. However, I then try to upload the JS files to the library as well. That goes OK. Then I go and replace the links to them in the header.php file with the links that now point to the site. Just like above. However, the JS isn't responsing at all.
Can you give me any tips on what I migth be doing wrong? I already went through all the files to see if I haven't missed a link, but everything seems fine.
Thank you very much in advance
Your JavaScript and CSS files should not go in the Media Uploader, they should be included in your theme. From there, you can enqueue them to be included in your header using wp_enqueue_script - http://codex.wordpress.org/Function_Reference/wp_enqueue_script - and wp_enqueue_style - http://codex.wordpress.org/Function_Reference/wp_enqueue_style.
The proper way to determine the page is to use the get_template_directory_uri() function.
For example if you want to register /wp-content/themes/YOUR_THEME/js/script.js and it relies on jQuery you would use this in your theme's functions.php:
wp_enqueue_script('script_name', get_template_directory_uri()."/js/script.js" ,'jquery',false,true);