The use of javascript to create an image slider
-
Hello,
I am trying to create an image slider with the use of javascript in a website I am currently creating, I have tried to follow a tutorial example https://www.javascriptkit.com/howto/show2.shtml and abit puzzled on how it would work. because it requires scripting in the header and calling the preloaded images from the script in the <header> onto the <body>, but the wordpress theme I am using has a header.php with the body being on different .php files if someone could help me or give me any suggestion that would be very appreciative,also just to point out I am kind of new to wordpress.Many thanks
Charles
-
When WordPress displays a page, a number of .php files are called. The html head should be in your header.php file, but when WordPress displays content, your header.php file is (let’s say) “combined” with say page.php and with footer.php to create the one page. So if you load your scripts in the header.php file, you should have access to them in your page.php file.
WordPress works this way so you can have different page templates by changing page.php, and not having to worry about header.php or footer.php. It makes controlling content with different templates easier.
Hi ahuggins,
Many thanks for your help, from your comment my understanding is that if i follow the tutorial from the link i had posted it should be ok because all the pages are interlinked and so i would not need to call the script in another page, would that be right?Thanks
CharlesIt should work. The way php (which WordPress is built in) works, is like this.
Basically, you have a normal web page. You could have that in one file, or with php you can split it into separate files. Splitting it allows you to use the same header and footer, for example, and then change out the body. Which is a very over simplified way that WordPress themes work. But let’s move on. So you put your header content in header.php, footer content in footer.php and page content in page.php.
Your header content (for example) includes the opening body tag.
Your page content includes everything between the body tags.
Your footer content includes the closing body tag and additional footer info.Still with me?
Header is like this:
<html> <head> <title>Title goes here</title> </head> <body>
Now within the page.php page there are two lines that include the header and the footer and whatever page content you want with the WordPress loop and function calls:
<?php include('header.php'); ?> //Page content goes here <?php include('footer.php'); ?>
Then the footer is:
</body> </html>
When a visitor goes to your site, WordPress tells it to display content and use the page template. The page template “compiles” on the server, which draws the content of header.php and footer.php into the page.php. So at runtime page.php contains a full html page, which includes your header and footer content. So if you call scripts in your header, you would be able to access them because they will be present at page load.
I hope that makes sense. It’s not accurate by any means, but I was trying to explain the concept of how the server side php works. I wanted to fully explain it because the interlinked term you used is not necessarily correct. The full page content is compiled on the server, not just linked to (although it does seem that way at first glance, I will admit).
You might look for a plugin that would handle this for you, if you manually code it then you manually have to change it. If you use a good plugin you can use the WordPress interface to make changes to your slider, like content or sometimes colors or even controls.
If you are just getting started, I hope you have a local test environment and are not making these changes on your live server. If you do not have one, look into Xampp or Wamp if on Windows or Mamp if on a Mac. Those will be your testing environment where you can get better acquainted with php, they allow you to run the server side code on your local machine. You can also install a local copy of your WordPress install, which is recommended before making changes to your live site. Let’s say you make a mistake and don’t have a backup, now your site is broken and you have to figure out how to undo it. If it’s your local it’s not as big a deal since your live site still works (although with out your slider currently).
Anyway hope that helps. And if you’re new to php do a Google search for “Diving into PHP”. It’s a good video series on php by Envato. Also they have “WordPress for Designers” which I think walks you through setting up a slider in WordPress while showing you the basics of theme design and code.
Or if you prefer to read, I recommend “Digging into WordPress” by the guys at digwp.com. Chris Coyier & Jeff Starr are the authors of both, they are really good guys and their book is fantastic. Check it out.
Wow that was allot of information ahuggins,
ok now I understand it abit more better, I have been using wamp as my local server to view the webpage before posting it up, following your comment of a live site I know this is out of the question i previously posted up but im currently stuck on uploading my website to a web hosting site i signed up with which is “justhost.com”. The confusing part im is linking a normal html/css page with wordpress and then understanding how to upload the whole thing on “justhost.com”, i’ve been trying to find tutorials that could help me but it seems like i cant find any unless im looking in the wrong place, you seem like a person to know a heck of allot about web development if you have any idea how this is done i cant thank you enough, i know i might seem like im trying to do everything to quick but im kind of short for time as this is my final year project for a degree course im doing and i only have less than a few days to complete it all, I have managed to design my most of pages in wordpress and used plugins and the final parts of my stage is the imageslider and posting the whole thing up on “justhost.com”.
As for your recommendations I will be deffinatly looking into them.Many thanks.
Great you’re using Wamp! That’s a good way to start.
Not sure what you mean by “linking a normal html/css page with WordPress.” (Sidenote, it’s WordPress (with a capital W and P) not wordpress please type it correctly…thank you ?? ).
But moving on. I still don’t think you have the idea, you’re not taking a full html/css page and loading that into WordPress (well not directly). WordPress acts as the backend of your site where you edit/maintain your content. You should really read this page: https://codex.www.ads-software.com/Theme_Development
After you have set up the content, WordPress serves your content in your theme, which you can customize. That link gives a really good explanation of the themes and how they should be developed. It also tells you the files that need to be in your theme.
You can also create a child theme: https://codex.www.ads-software.com/Child_Themes
A child theme is great because you can sort of piggyback on the work of another theme. You could create a child theme of the default theme that comes with WordPress (should be called TwentyEleven or TwentyTen if you haven’t updated…or update now ?? ).
You could also open up the files in the default theme to get an idea of how WordPress themes work. Read the functions that are called and then search for them in the Codex to understand what they do.
If you decide to go the child theme route, then in order to load your script you would need to add a line in your functions.php file in your theme directory like this:
<?php function my_init_method() { wp_register_script( 'slider_script', 'https://path/to/script.js'); wp_enqueue_script( 'slider_script' ); } add_action('init', 'my_init_method'); ?>
https://codex.www.ads-software.com/Function_Reference/wp_enqueue_script
wp_enqueue_script is a safe way to add javascript file to your WordPress page.
Basically what is happening is that your are hooking a function (my_init_method) to the hook ‘init’, now anytime ‘init’ is fired so is your function. In your function you use wp_enqueue_script to load your custom scripts. Then you can access them on your page.
This may be getting too far ahead of you. But it’s the way it should be done.
Here is a tutorial that shows the least amount of files you need to make a real theme:
https://themeshaper.com/2009/06/25/wordpress-theme-template-directory-structure-tutorial/
That’s probably a good place to start, it’s also one part of a 12 part series that explains the basics of themeing. If this is just for school, I can understand just wanting to “get it done” but I think it’s worth putting in a little extra time and doing it more correctly.
- The topic ‘The use of javascript to create an image slider’ is closed to new replies.