How to make a colored slider feed in WordPress. We are preparing the structure for the slider. WordPress Content Slide Plugin

The slider for WordPress that I'm about to tell you about is the coolest among all the sliders I've seen. It has so many settings and so many possibilities that you can achieve almost any goal you set. The most important thing is that it is free. He has only one drawback - he is English language. And it doesn't matter.

The Smart Slider 3 plugin allows you to create a slider for a site of any complexity and with any elements. You can download this plugin from the link below.

A slider is a site element in which images alternate automatically or based on user action. These images can be just pictures, link pictures, or video previews. The slider helps to demonstrate a lot of information in a small area of ​​the site. Plus, it looks modern and attractive.

After installing the slider plugin on the site and activating it, your console will display new item"Smart Slider". Go to it.

Here we have three tabs:

• Slider. List of all created sliders. There is already one sample slider created by the plugin developers.
• Settings. Plugin settings. There are a lot of settings, and the best thing is that they can all be left as default. Those who are interested can climb there, but I will not consider this point in detail.
• Go Pro! You can buy it here paid version plugin. But who needs it when we are given so many opportunities for free! You will learn about them below.

Let's create a slider for WordPress and see the capabilities of this plugin. Go to the "Sliders" tab and click green button"Create slider".

In the window that opens, give your slider a name in the “Slider name” field. I will write “My pictures” there. Select the size in the “Width” and “Height” fields, define one of three options display in "Preset". In principle, you can leave everything as default if you don’t want to mess around. Finally, click the “Create” button.

So, a slider for WordPress is created and after that we see a page with settings.

The first block of settings is “Publish slider”. Here is information on how to then publish the finished slider. In the “Shortcode” column you can get a shortcode that can be placed in a post or on a page. In the “Page or Post editor” column we are shown that in the post and page reactor a new button, which allows you to publish a slider. And in the “PHP code” column you can get php code to install the slider in template files.

The first two publishing methods are the most convenient.

In the “General” tab, the main options are configured: name (Name), position on the site (Align), control (Controls), animation (Animation), etc.

The "Size" tab is used to adjust the sizes. You can define the width and height (Slider size), margins (Margin), position of the slider on the screen (Default slide background fill mode), adaptability (Responsive mode) and more.

In the “Autoplay” tab, you can configure the auto-switching of the slider.

"Other" tab for more fine adjustments, you don't have to touch it.

Let's go a little lower and see another settings block, which has six tabs. The “Arrows” tab provides enormous opportunities for customizing slider control arrows for WordPress.

"Bullets" controls bullets. Bullets are small circles on the slider that you can use to toggle it.

The “Autoplay” tab controls the autoplay of the slider.

In “Bar” you can enable the bar next to the slider. Very convenient if you need to show a description, for example.

The “Thumbnail” tab manages the thumbnail images of the WordPress slider.

So, if you have already played with the settings, then let’s add images to our slider for WordPress. To do this, click on the arrow next to green button"Add Image Slider". A menu will open.

To add an image to the slider, you need to click on the “Add images” item in this menu. A standard media library will open, where you need to select a picture. After selecting a picture, its thumbnail immediately becomes visible in the slider. If you click on it, you can make certain settings.

I won’t tell you the settings in detail. In short, there you can give the image a name, a description, and assign a link to it. But the best thing is, you can create layers with text, images, buttons and overlay them on the loaded image, just like in Photoshop.

To create layers, use the block that I showed in the screenshot below.

After all the image settings, do not forget to click “Save”.

If you now click “Add video” on the add slide button, you can attach a video from YouTube or Vimeo to the slider. To do this, you just need to paste the video link into the field and click “Add Video”.

The video immediately appears in the list of slides and when you click on it, they open individual settings, the same as in the case of the picture.

At the request of workers, I wrote an article about adding a slider to WordPress theme. The article will be universal, i.e. based on it, you can add a slider to any WP theme. We will examine this issue using the Pinbin theme as an example. A link to the topic and all files from the lesson will be after the article.
This new format articles with videos. It is especially important to find out what you liked about the video and what you didn’t. Share your opinions in the comments below this article.
Attention! If you value your nerves and time, then order a website from professionals. You can order here. Poke!
Enjoy watching!

If you don't know JavaScript basics and are not familiar with jQuery library, then I highly advise you to read the information in the links below:

Before starting any business, you must first familiarize yourself with the source materials. We have a Pinbin theme on hand. And she's adaptive. This means that it adapts to different screen resolutions. Including mobile devices. Accordingly we need adaptive slider.
We will of course use ready-made solutions in JQuery.
I used ResponsiveSlides as a slider. It is adaptive and quite easy to install. You will find a link to the description and documentation after the article. That's all we need. Go.

We will display the slider only on the main page. Therefore, we open the index.php file and before starting to display posts, i.e. Before the line we write the HTML code: