How to do Wordpress Theme Development, part 3 - The Scipio Files #10
How to do Wordpress Theme Development, part 3 - The Scipio Files #10
Hi everybody! This is already the third part of my series on How-to Do Wordpress Theme Development, in which I'm showing how to develop a completely functional, modern, Wordpress Theme yourself, from scratch, starting with nothing.
In part 1 we first covered the basics of both HTML and CSS, and in part 2 we built a complete, yet static, HTML/CSS template.
In this episode we'll spice-up the visual / image slider, by adding in 2 more visuals and a self-built jQuery effect where the active (top) slide will morph / transition into the next slide via a "fadeOut" effect that I will explain in-depth.
This is the visual slider effect we'll be adding to the template:
The code
index.html
First, you need to open up again the code we've built in part 2, and in the index.html part of the code, in the <head> section of the document, add the following two lines of code, just below the <title> tag, but still inside the <head> element:
<script src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<script src="js/main.js"></script>
Also, in the same file but in the <body> section of the document, look up the part <section id="slider"> and inside that add two more back images to div.slider like so:
<div class="slider">
<div style="background-image: url('images/visual1.jpg')"></div>
<div style="background-image: url('images/visual2.jpg')"></div>
<div style="background-image: url('images/visual3.jpg')"></div>
</div>
Nota bene 1: in this set-up, I created a folder called images/ inside my them ("myTheme"), and inside that folder I've now placed 3 visual images called visual1.jpg and visual2.jpg and visual3.jpg.If your images have a different name, and/or if you named your images/ folder differently, then adjust the code accordingly of course.
Nota bene 2: I've used visual images that all have the same dimensions, in my case 1600 pixels wide by 700 pixels in height.
main.js
Now create another folder inside your myTheme/ folder, call that js/ (for "JavaScript") and inside that folder place a new file called main.js. Inside it, paste the following code:
$(document).ready(function() {
// IIFE: visual slider
(function scipioSlider() {
var $top = $('section#slider>div.slider').children().first();
if ( !$top.hasClass('active'))
$top.addClass('active');
$('.active').css({"z-index": 3});
setInterval(function() {
var $active = $('div.slider').children('.active');
var $next = ( $active.next().length > 0 ) ? $active.next() : $top;
$next.css({"z-index": 2});
// fadeout
var fadeout = function() {
$active.fadeOut(1000, function() {
$active.removeClass('active').css({"z-index": 1}).show();
$next.addClass('active').css({"z-index": 3});
})
}
fadeout();
}, 3000);
})();
});
The code explained
In index.html we just added the following code snippet:
<script src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<script src="js/main.js"></script>
- The
<script>element tells the browser to load some code, the browser needs to "interpret" and run inside your browser. By default (nowadays) the browser assumes the language of the<script>is JavaScript, which we are using here, so no need to change anything there. - Like in Part 2, where we used an externally hosted (by Google) font (
Open Sans) via what's called a "CDN", we're doing the same thing here, but in this case we are referring to the minimized jQuery Core code located at https://code.jquery.com/jquery-3.2.1.min.js . (If you open that url in a new browser tab, you'll see it's quite a lot of code, and "packed together" as well, for it's minimized and somewhat obfuscated). - Using this externally hosted jQuery Core code, we can build upon its functionality, so we don't have to build that all ourselves in order to use it!
- The second
<script>element tells the browser to also use our own JavaScript filemain.js, located in the folderjs/.
Now I'm going to try to explain the code inside main.js, as easy as I can:
- try to read the jQuery (JavaScript) code "outside inward".
- the visual slider effect functionality is embedded inside a so-called "document ready jQuery statement":
$(document).ready(function() { // code };
- what we are using jQuery for technically, with this effect, is "manupulating the DOM, Document Object Model". We need to embed our slider effect inside this statement for jQuery to detect if the DOM has fully loaded, and only then start to execute its JavaScript code. (Technically
$( window ).on( "load", function() { ... })would have been even better because that would also wait for the images to load, but let's not make it too difficult now...) (function scipioSlider() { // code })();is what's called an "IIFE": an Imediately Invoking Function Execution. It is used to run by itself after the DOM has loaded, without any user interaction (like clicking abutton or something). The named functionscipioSlider()itself is placed inside( )and it also ends with();.- inside the
scipioSlider()function, we first declare and instantiate a jQuery object (variable) called$topby using something called "DOM Traversal": it looks for a<section>html element withid="slider", and inside that look for an immediate descendent called<div class="slider">. Via "method chaining", it then scans all its children (the<div>'s holding the visual slides), and assigns the first one to$top: in this casevisual1.jpg. - it then adds an html
class"active"to that top<div>, in case it's absent, and also adds an additional css property to it:z-index: 3(therewith "stacking it" to the top of the visual stack so the browser shows it, because without it, the first slide would be placed at the bottom of the other 2 slides!). - then we run an interval function via "good old"
setInterval(function() { // code }, 3000);, so in this case it sleeps for 3000 milliseconds (3 seconds), fires, sleeps for 3 seconds again, fires, etc. - inside our
setInterval()function, we first assign the$activeslide, as the one having theclass="active"attribute (at the beginning, that's the$topslide, we just set that!). - then, we check if we indeed have more than 1 visual slide, and if so we add a
z-index: 2to the next inline slide (the$activeslide needs to transition into). - finally, we run our effect via the jQuery built-in effect method
fadeout(), morphing to the$nextslide, we switch theclass="active"to label$nextas$active, increment thez-indexof the now active slide to3again, and we place the previously active slide to the bottom of the visual stack (``z-index: 1`). - in case the sliding effects move too fast or slow to your liking, you can change the 1000 & 3000 millisecond numbers! (Increase them to let the effect run slower).
Concluding
This maybe was a bit difficult to comprehend (for jQuery / JS beginners at least), but I hope you could understand it anyway! Stay tuned for part 4 of this series, in which we'll convert some parts of the HTML code to PHP and turn this template into an actual working valid Wordpress Theme!
@scipio
Posted on Utopian.io - Rewarding Open Source Contributors
Thank you for the contribution. It has been approved.
You can contact us on Discord.
[utopian-moderator]
Cool..
Right now i know how make wordpreess for theme.
Thanks for sharing @scipio
Well actually you will know after reading part 4 ;-) Part 1 was about the basics of html and css, explaining the language components. Part 2 was about developing a full-fledged yet static template. Now in part 3 (this article) we added some jQuery dynamics. And in part 4 we will convert the html to php, and I'll show you how to make it an actual Wordpress Theme (so you can add more pages, use this as its template, and manage the content via the Wordpress Admin interface and the MySQL database running it ;-)
Scipioslider! I will check this better when I get to my laptop x)
Also I think something like this can be done with CSS3... Maybe xD
Actually, what I've shown here (using a self-written jQuery function) could indeed be re-written using CSS3 "animations". However, that would require more code and it would be really static (not flexible): in case you wanted to change the slides order (show slide 3 second, and slide 2 third for example) using CSS3 animations you would need to completely change the code and hardcode all animation timing. In case you wanted to add a 4th, 5th, or 6th slide to the stack, again rewrite it all.
In part 4 of this WP Theme Development series, I will convert some parts of the static html to flexible php using the Wordpress Codex ;-). And in part 5 I will add an easy-to-use WP plugin to let you configure "Custom Post Types" (like "Slides") and add to that Custom Fields (like "slideVisual"). Using that, you can use the Wordpress Admin interface to change / add / remove slides, and to change their order in the slide stack, but the scipioSlider() will remain functioning without any code changes! Stay tuned! ;-)
Oh good! This sounds great so we don't depend on a plugin for the sliders!:)
This is going really wel!!
Maybe, you can help me with some web portofolio for me. :)
Sure! ;-)
I can give you a subdomain at wearecodex.com ;)
wow. that was awesome. :)
Thank you for the contribution. It has been approved.
You can contact us on Discord.90909099
Many of you will benefit from this type of post. Because they do not know anything about WordPress, they can learn. keep it up. thanks for sharing @scipio
good post.wordpress is a practical issu.
Which parts of this tutorial did you find most practical?
thanks really learning a lot
very good and clear
I have one question to ask u
Go ahead...