Add Smart Slider 3 to Customizr 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 right below the menu.

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 the <header> tag. 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 <header without the greater than but with the less than sign, as it is very rare that the greater than sign immediately follows the found codes. I find this code in line 34 of the header.php file:

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. Since I want the slider above the menu, I'll paste it below the </header> line:

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 Customizr theme.

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