A carousel is not just a list of links, it exists to display the links as items in a way that makes them more attractive. In our previous article we saw how to create a carousel, and how to display the HTML elements we need. Now it’s time to style our carousel.
Our carousel is currently a simple list of links, by the end of this article we will have a properly formatted carousel. We’ll see how to apply the styles we need to have the result I showed you in the sample image in Part 1. Of course there are many properties that you can customize, websites don’t have to be the same around the world!
First we’ll look at how we can properly link a CSS file to a web page within WordPress. Then we’ll style our elements, which will demonstrate some CSS tricks that can be useful in many different situations.
Linking an External CSS File
To make the styling of our carousel as flexible and easy as possible, we limited the use of inline styles to only one attribute, the background of each item. For all the other styles we will use an external CSS file (stylesheet). You can chose your own name for the file (such as carousel.css) and place it in your plugin’s folder (or in a subdirectory).
To include the file we’ll use the wp_enqueue_style() function as described in our article about the right way to include a script.
We can’t call this function just anywhere, it must be called before the call of wp_head() (unlike a script, we can’t include a CSS file in the footer!). We can use wp_enqueue_scripts, which is called when WordPress includes the scripts and the styles for the current page (in the front-end), so it’s perfect for this application.
The code below must appear in your plugin’s main file.
Continue reading %Building a WordPress Carousel Plugin: Part 2%
by Jérémy Heleine via SitePoint
No comments:
Post a Comment