Add Smart Slider 3 to the X theme

☝️ Note: You could follow this documentation, too!
⚠️ Warning: We suggest creating a child theme and making the modifications there, to avoid losing the changes during the next theme update.

The slider should be placed behind every other element in the page.

Finding code parts where the slider needs to be added - frontend

Each browser you are possibly using has some kind of developer tools that will allow you to inspect the HTML codes that are making the currently viewed page. Since I want the slider to appear below the menu, I'll inspect the code around the menu. To do so, I'll have to right click around the menu (be careful not to choose any link accidentally) and from the menu appearing, I'll choose inspect element.

A new window will be shown containing tons of codes - which are making the page. The line where I hit the "Inspect element" will be higlighted.

When you hover over any codepart, it will be highlighted so you will know for sure what code is responsible for which part of your page.

Using this method, I learned that the menu is made by a <div> tag that has the following classes: x-container-fluid max width. I will need this info in the next step.

Finding code parts where the slider needs to be added - in the theme's files

For this step, you will need to connect to your site via FTP. Naturally, you can reach your theme's files from your WordPress dashboard, however, it is highly suggested not to use that when you are doing modifications like this one in your active theme.

Usually the codes that are making the menu can be found in the header.php file, so locate it in the following path: wp-content/themes/[your-theme]. In some rarer cases, the code you are looking for is not in the header.php file of the theme. If you can't find that codepart, look through your theme's files like this. Once you have the php file that has your code, you should open it using some simple text editor. Even your simple NotePad (or a more advanced version, NotePad++) is capable of opening and editing PHP files. Open the file and open a search box (hotkeys: CTRL + F on Windows, CMD + F on MAC) and type the codepart you found in Step 1.

I'll search for x-container-fluid max width. I find this code in line 13 of this file: \framework\views\integrity\wp-index.php

Pasting the PHP code

To be able to add the slider to the PHP file, you'll need to get it's PHP code first. Go to the Slider settings → General tab:

Click on the code within the yellow block and it will be selected immediately, then simply copy it.

Go back to the file where the code will be added, then paste it. I'll paste the code below the div I found at one step back.

Save the file and upload it back to your sever. If you would use any cache plugin or server side cache, clear them and refresh the browser in your site. You'll see that the slider appears in the exact position where you placed it.

Based on this tutorial, you will be able to put the slider into any place in your X theme.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.