Html/CSS code to WordPress

just use a slider plugin instead of trying to force some random piece of code you’ve found on the internet into your site.

well, if you want to put it in your site then that’s up to you. you’ll have to figure out how your theme is serving up content and template files in order to work out exactly where to put the html that creates the slideshow, the css will go into your style.css file and the javascript that activates it will have to end up in the footer of the site just before the body tag.

create a new file and call it something like slideshow_x.js and add in the javascript code. then in the theme’s functions.php file you’ll need to register this script and then enqueue it in order for wordpress to process it correctly (as far as i know).

i’m all for learning new stuff just i learned the hard way not to trust chunks of code from the internet that do fun things, especially when they’re not written to degrade gracefully or play well with something like wordpress.

don’t try this on a live site, set yourself up a development server if you haven’t already (XAMPP for PC or MAMP for Mac)!

– if you copy the css from the slideshow that you’ve grabbed from the net and paste it into the theme’s style.css file (doesn’t matter where but maybe put /* slideshow css */ before it to separate it out from the rest of the theme’s css) and save the file. or create a completely new stylesheet called slideshow_x.css and put it in there so it’s totally separate.

– next, take the javascript that makes the slideshow work and put that in a file called slideshow_x.js and save that to your theme folder too. your theme may have a folder for .js files, if it does put it in there.

– next comes a harder part. depending on which theme you’re using it will handle template files in a different way. it may just load files like page.php and single.php and that’s it or it may load page.php and call into page.php a sub template file like content-home.php for the home page contents, content-contact.php for a contact form etc.

– *** in the theme i created for a site that used a bootstrap carousel i had to create a new page template (page-home.php) and in that use the get_template_part(‘content’, ‘home’); method to call the part with the carousel into the page-home.php template file. it’s layers within layers! ***

– once you’ve found where the html for the carousel is supposed to go in the theme’s template structure paste it in and we’ll come back to it so that it calls the images required.

– put your images into the theme’s images folder.

– in the theme’s functions.php file you need to register and then call the scripts, both css and javascript. here’s a really good article explaining how to do that: http://www.wpbeginner.com/wp-tutorials/how-to-properly-add-javascripts-and-styles-in-wordpress/. it’s not as complex as it may seem and it’s the way that wordpress likes things added to it.

– in the html for the slider you’ve probably got some <img src=”…” /> tags linking to the images. you need to tweak these so that wordpress knows where to find the images now they’re in the theme and not where they were. for this use:

<img src="<?php bloginfo('template_directory'); ?>/folder/image-name"/>

so, if you’ve pasted the html into the right template file and tweaked the image src=”” to reflect the template directory, registered and enqueued the css and javascript correctly, uploaded your images to the theme’s images folder it should work…

if it doesn’t keep playing about with it, moving things about until it does. but as mentioned at the top of this, if you haven’t already, set up a development server on your own computer to try this out, your site visitors don’t need to see this 😀

you’re almost there, you’ll need to edit the wp-config file from the live site when you put it on the localhost on your computer, it will have the database/server details from the live host so you’ll need to give it the localhost details so it can find the local database.

keep going, you’re doing well 😀