In this lesson, We will see how to add simple setting for your theme using Option Tree plugin.
If you didn't view my previous tutorial (How to install Option tree plugin) -> Please click here.
1. Go to Dashboard.
2. Click Option Tree -> Settings -> Click add setting button -> Type your settings.
3. Label -> Featured Image 1 (You can add whatever the name you want).
4. ID -> fi1 (You can add whatever the name you want).
5. Type -> Upload.
6. Go down and click save.
7. Now open Appearance -> Theme Options -> Your settings for Featured Image 1 will display here.
8. Now open your front-page.php file. (I have set my front-page is home page, if your index.php is your home page, please open it).
9. Find the three columns round image option. I mean the following code from your front-page.php.
<img class="img-circle" src=" data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw== " alt="Generic placeholder image" width="140" height="140">
Or where ever you want to add image setting.
Add the following code inside the src=""
10. Now go to your Appearance -> Theme Options -> Featured Image 1 -> Click + sign and upload image or add image from your media library -> Click Send Option Tree button -> Click save option.
11. Your custom image will display at front end.
Please view the Video Tutorial:
If you didn't view my previous tutorial (How to install Option tree plugin) -> Please click here.
1. Go to Dashboard.
2. Click Option Tree -> Settings -> Click add setting button -> Type your settings.
3. Label -> Featured Image 1 (You can add whatever the name you want).
4. ID -> fi1 (You can add whatever the name you want).
5. Type -> Upload.
6. Go down and click save.
7. Now open Appearance -> Theme Options -> Your settings for Featured Image 1 will display here.
8. Now open your front-page.php file. (I have set my front-page is home page, if your index.php is your home page, please open it).
9. Find the three columns round image option. I mean the following code from your front-page.php.
<img class="img-circle" src=" data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw== " alt="Generic placeholder image" width="140" height="140">
Or where ever you want to add image setting.
Add the following code inside the src=""
<?php echo ot_get_option( $option_id, $default ); ?>Here "$option_id" will display your changed image. So add your id here. For example "fi1". Refer 4th point."$default" is your default image (value). If you didn't add any image at your theme options page this default image will display here. So give your default image link here. After implementing this setting image tag will display something like this.<img class="img-circle" src="
<?php echo ot_get_option( 'fi1', 'data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==' ); ?>
" alt="Generic placeholder image" width="140" height="140">
10. Now go to your Appearance -> Theme Options -> Featured Image 1 -> Click + sign and upload image or add image from your media library -> Click Send Option Tree button -> Click save option.
11. Your custom image will display at front end.
Please view the Video Tutorial:
No comments:
Post a Comment