Php, Wordpress, CodeIgniter, Magento: October 2022

Wednesday, October 26, 2022

Vertical tab on click open div container

Here I write simple html and javascript code for click and open div container.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
* {
box-sizing: border-box;
border-spacing: 0;
}
body {
font-family: "Lato", sans-serif;
padding: 0;
margin: 0;
}
/* Style of container */
.container {
padding: 20px;
background-color: #f2f2f2;
height: 100%;
width: 100%;
display: inline-block;
min-height: 100vh;
}
.full-box {
width: 100%;
display: flex;
align-items: flex-start;
}
.full-box .left-sidebar {
width: 450px;
position: sticky;
top: 20px;
}
.full-box .right-data {
width: calc(100% - 475px);
margin-left: 25px;
position: sticky;
top: 20px;
min-height: calc(100vh - 40px);
padding: 25px;
background-color: #ffffff;
overflow-y: auto;
}
/* Style the tab */
.tab {
float: left;
background-color: #ffffff;
width: 100%;
min-height: 300px;
padding: 25px;
}
/* Style the buttons inside the tab */
.tab button {
display: block;
background-color: #ffffff;
color: #49affa;
border: 1px solid #49affa;
padding: 20px 16px;
width: 100%;
margin-bottom: 15px;
outline: none;
text-align: left;
cursor: pointer;
transition: 0.3s ease-in-out;
font-size: 17px;
font-weight: 600;
position: relative;
}
.tab button:after {
content: "";
position: absolute;
width: 10px;
height: 10px;
top: 0;
bottom: 7px;
right: 25px;
border: 3px solid #49affa;
border-left: 0;
border-top: 0;
transform: rotate(45deg);
margin: auto 0;
transition: 0.3s ease-in-out;
}
/* Change background color of buttons on hover and active */
.tab button:hover,
.tab button.active {
background-color: #49affa;
color: #ffffff;
}
.tab button.active:after,
.tab button:hover:after {
border-color: #ffffff;
}
.tab button.active:after {
transform: rotate(-45deg);
bottom: 2px;
}
/* Style the tab content */
.tabcontent {
float: left;
background-color: #ffffff;
width: 100%;
}
.vesseltypes {
text-align: center;
font-weight: 600;
display: inline-block;
margin-bottom: 25px;
font-size: 22px;
line-height: 30px;
color: #2b2b5c;
}
.tabcontent1 {
float: left;
border: 0;
width: 100%;
}
table {
overflow: auto;
}
table thead {
position: sticky;
top: 0;
}
table thead tr th,
table tbody tr td {
min-width: 250px;
}
table thead tr th {
background-color: #49affa;
padding: 20px 16px;
color: #ffffff;
font-size: 18px;
font-weight: 600;
}
table tbody tr td {
background-color: #f2f2f2;
padding: 14px 16px;
color: #475483;
font-size: 16px;
font-weight: 600;
}
table tbody tr:first-child td {
border-top: 0 !important;
}
@media all and (max-width: 991px) {
.container {
padding: 15px;
}
.tab {
padding: 20px;
}
.full-box .left-sidebar {
width: 300px;
}
.full-box .right-data {
width: calc(100% - 300px);
min-height: calc(100vh - 30px);
padding: 20px;
}
}
@media all and (max-width: 767px) {
.full-box {
width: 100%;
display: block;
}
.full-box .left-sidebar {
width: 100%;
display: block;
margin-bottom: 20px;
position: unset;
}
.full-box .right-data {
width: 100%;
display: block;
position: unset;
margin-left: 0;
min-height: unset;
height: 100%;
padding: 0;
background: transparent;
}
.full-box .right-data .tabcontent1 table {
margin-top: 20px;
}
}
</style>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<div class="container">
<div class="full-box">
<div class="left-sidebar">
<div class="tab">
<span class="vesseltypes"><strong>Vessel Types</strong></span>
<button
class="tablinks"
onclick="openCity(event, 'Barge')"
id="defaultOpen"
>
Barge
</button>
<button class="tablinks" onclick="openCity(event, 'BulkCarrier')">
Bulk Carrier
</button>
<button
class="tablinks"
onclick="openCity(event, 'CableLayingVessel')"
>
Cable Laying Vessel
</button>
<button class="tablinks" onclick="openCity(event, 'CargoBarge')">
Cargo Barge
</button>
<button class="tablinks" onclick="openCity(event, 'Generalcargo')">
General Cargo
</button>
<button class="tablinks" onclick="openCity(event, 'JackupVessel')">
Jack up Vessel
</button>
<button class="tablinks" onclick="openCity(event, 'LNG')">
LNG
</button>
<button class="tablinks" onclick="openCity(event, 'OilTanker')">
Oil Tanker
</button>
<button
class="tablinks"
onclick="openCity(event, 'ResearchVessel')"
>
Research Vessel
</button>
<button
class="tablinks"
onclick="openCity(event, 'Semisubmersible')"
>
Semi-submersible
</button>
<button class="tablinks" onclick="openCity(event, 'SupplyVessel')">
Supply Vessel
</button>
<button class="tablinks" onclick="openCity(event, 'Tug')">
Tug
</button>
</div>
</div>
<div class="right-data">
<div id="all" class="tabcontent1">
<table width="100%" border="1">
<thead>
<tr>
<th width="50%">Services</th>
<th width="50%">Locations</th>
</tr>
</thead>
</table>
</div>
<div id="Barge" class="tabcontent">
<table width="100%" border="1">
<tbody>
<tr>
<td width="50%">New Delivery</td>
<td width="50%">Wilhelmsen, Germany</td>
</tr>
</tbody>
</table>
</div>
<div id="BulkCarrier" class="tabcontent">
<table width="100%" border="1">
<tbody>
<tr>
<td width="50%">Change of Management</td>
<td width="50%">Kobe, Japan</td>
</tr>
<tr>
<td>Change of Management</td>
<td>Iskenderun, Turkey</td>
</tr>
<tr>
<td>ISM / ISPS Audit</td>
<td>Tacoma, USA</td>
</tr>
<tr>
<td>ISM / ISPS Audit</td>
<td>Port Rades, Tunisia</td>
</tr>
<tr>
<td>ISM / ISPS Audit</td>
<td>Oita, Japan</td>
</tr>
<tr>
<td>ISM / ISPS Audit</td>
<td>New York USA</td>
</tr>
<tr>
<td>ISM / ISPS Audit</td>
<td>Gunsan, S.Korea</td>
</tr>
<tr>
<td>ISM / ISPS Audit</td>
<td>Dnipro-Buzkyi, Ukraine</td>
</tr>
<tr>
<td>ISM / ISPS Audit</td>
<td>Casablanca, Morocco</td>
</tr>
<tr>
<td>ISM / ISPS Audit</td>
<td>Camden USA</td>
</tr>
<tr>
<td>PSC preparation & Training</td>
<td>Port Rades, Tunisia</td>
</tr>
<tr>
<td>Safety Inspection</td>
<td>Oita, Japan</td>
</tr>
<tr>
<td>Safety Inspection</td>
<td>Gunsan, S.Korea</td>
</tr>
<tr>
<td>Technical Inspection</td>
<td>Oita, Japan</td>
</tr>
<tr>
<td>Technical Inspection</td>
<td>Kobe, Japan</td>
</tr>
<tr>
<td>Technical Inspection</td>
<td>Dnipro-Buzkyi, Ukraine</td>
</tr>
<tr>
<td>Technical Inspection</td>
<td>Casablanca, Morocco</td>
</tr>
<tr>
<td>Technical Inspection</td>
<td>Camden USA</td>
</tr>
<tr>
<td>USCG preparation& Training</td>
<td>Tacoma, USA</td>
</tr>
<tr>
<td>USCG preparation& Training</td>
<td>New York USA</td>
</tr>
<tr>
<td>USCG preparation& Training</td>
<td>Camden USA</td>
</tr>
</tbody>
</table>
</div>
<div id="CableLayingVessel" class="tabcontent">
<table width="100%" border="1">
<tbody>
<tr>
<td width="50%">Safety Inspection</td>
<td width="50%">Middlesbrough, UK</td>
</tr>
<tr>
<td>Safety Inspection</td>
<td>Middlesbrough, UK</td>
</tr>
<tr>
<td>Safety Inspection</td>
<td>Hitachi, Japan</td>
</tr>
<tr>
<td>SSA /SSP</td>
<td>Brattvaag, Norway</td>
</tr>
<tr>
<td>ISM / ISPS Audit</td>
<td>Pikkala, Finland</td>
</tr>
<tr>
<td>ISM / ISPS Audit</td>
<td>Hitachi, Japan</td>
</tr>
<tr>
<td>New Delivery</td>
<td>Brattvaag, Norway</td>
</tr>
<tr>
<td>USCG preparation& Training</td>
<td>Middlesbrough, UK</td>
</tr>
<tr>
<td>USCG preparation& Training</td>
<td>Eemshaven, Netherlands</td>
</tr>
</tbody>
</table>
</div>
<div id="CargoBarge" class="tabcontent">
<table width="100%" border="1">
<tbody>
<tr>
<td width="50%">Heavy lift -Offshore operation</td>
<td width="50%">Sunderland, UK</td>
</tr>
</tbody>
</table>
</div>
<div id="Generalcargo" class="tabcontent">
<table width="100%" border="1">
<tbody>
<tr>
<td width="50%">Heavy lift -Offshore operation</td>
<td width="50%">Sunderland, UK</td>
</tr>
<tr>
<td width="50%">Heavy lift -Offshore operation</td>
<td width="50%">Leith, Scotland</td>
</tr>
</tbody>
</table>
</div>
<div id="JackupVessel" class="tabcontent">
<table width="100%" border="1">
<tbody>
<tr>
<td width="50%">Vessel Assessment</td>
<td width="50%">Remote Assessment</td>
</tr>
<tr>
<td width="50%">Condition Assessment</td>
<td width="50%">QIDONG, China</td>
</tr>
<tr>
<td width="50%">Condition Assessment</td>
<td width="50%">Flushing, Netherlands</td>
</tr>
<tr>
<td width="50%">Condition Assessment</td>
<td width="50%">QIDONG, China</td>
</tr>
<tr>
<td width="50%">Condition Assessment</td>
<td width="50%">QIDONG, China</td>
</tr>
<tr>
<td width="50%">ON Hire /Off Hire Survey</td>
<td width="50%">Falmouth, UK</td>
</tr>
<tr>
<td width="50%">ON Hire /Off Hire Survey</td>
<td width="50%">Falmouth, UK</td>
</tr>
</tbody>
</table>
</div>
<div id="LNG" class="tabcontent">
<table width="100%" border="1">
<tbody>
<tr>
<td width="50%">Navigation Audit</td>
<td width="50%">Skagen, Denmark</td>
</tr>
<tr>
<td width="50%">Navigation Audit</td>
<td width="50%">Fos, France</td>
</tr>
<tr>
<td width="50%">Navigation Audit</td>
<td width="50%">Rotterdam, Netherlands</td>
</tr>
<tr>
<td width="50%">Mooring Audit</td>
<td width="50%">Rotterdam, Netherlands</td>
</tr>
</tbody>
</table>
</div>
<div id="OilTanker" class="tabcontent">
<table width="100%" border="1">
<tbody>
<tr>
<td width="50%">Safety Inspection</td>
<td width="50%">Amsterdam, Netherlands</td>
</tr>
<tr>
<td>Technical Inspection</td>
<td>Rotterdam, Netherlands</td>
</tr>
<tr>
<td>Technical Inspection</td>
<td>Qinzhou, China</td>
</tr>
<tr>
<td>Technical Inspection</td>
<td>Rotterdam, Netherlands</td>
</tr>
<tr>
<td>Pre-purchase Inspection</td>
<td>Hull, UK</td>
</tr>
<tr>
<td>Pre-purchase Inspection</td>
<td>Singapore</td>
</tr>
<tr>
<td>Pre-purchase Inspection</td>
<td>Rotterdam, UK</td>
</tr>
<tr>
<td>Pre vetting Inspection & Training</td>
<td>Fujairah, UAE</td>
</tr>
<tr>
<td>Pre vetting Inspection & Training</td>
<td>Athens, Greece</td>
</tr>
<tr>
<td>Pre vetting Inspection & Training</td>
<td>Singapore</td>
</tr>
<tr>
<td>Pre vetting Inspection & Training</td>
<td>PIstanbul, Turkey</td>
</tr>
<tr>
<td>Condition Assessment</td>
<td>Algeciras, Spain</td>
</tr>
<tr>
<td>Condition Assessment</td>
<td>Kaarsto, Norway</td>
</tr>
<tr>
<td>Change of Management</td>
<td>Balboa, Panama</td>
</tr>
<tr>
<td>Change of Management</td>
<td>Balboa, Panama</td>
</tr>
<tr>
<td>Dry dock specification</td>
<td>Istanbul, Turkey</td>
</tr>
<tr>
<td>Incident Investigation</td>
<td>Mersin, Turkey</td>
</tr>
<tr>
<td>ISM / ISPS Audit</td>
<td>Singapore</td>
</tr>
<tr>
<td>SSA/SSP</td>
<td>Istanbul, Turkey</td>
</tr>

</tbody>
</table>
</div>
<div id="ResearchVessel" class="tabcontent">
<table width="100%" border="1">
<tbody>
<tr>
<td width="50%">Condition Assessment</td>
<td width="50%">Cork, Ireland</td>
</tr>
<tr>
<td width="50%">Safety Inspection</td>
<td width="50%">Cork, Ireland</td>
</tr>
</tbody>
</table>
</div>
<div id="Semisubmersible" class="tabcontent">
<table width="100%" border="1">
<tbody>
<tr>
<td width="50%">Condition Assessment</td>
<td width="50%">Nantong, China</td>
</tr>
<tr>
<td width="50%">Condition Assessment</td>
<td width="50%">Nantong, China</td>
</tr>
</tbody>
</table>
</div>
<div id="SupplyVessel" class="tabcontent">
<table width="100%" border="1">
<tbody>
<tr>
<td width="50%">On Hire/Off Hire vessel audit</td>
<td width="50%">Rotterdam, Netherlands</td>
</tr>
</tbody>
</table>
</div>
<div id="Tug" class="tabcontent">
<table width="100%" border="1">
<tbody>
<tr>
<td width="50%">USCG preparation& Training</td>
<td width="50%">Middlesbrough, UK</td>
</tr>
<tr>
<td width="50%">USCG preparation& Training</td>
<td width="50%">Eemshaven, Netherlands</td>
</tr>
</tbody>
</table>
</div>

</div>
</div>
</div>
<script>
function openCity(evt, cityName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
</script>
</body>
</html>

Monday, October 17, 2022

Simple Elementor Video Background Sound Button for wordpress website

Here I explain how to add your video file as background of any section and set sound on/off button functionality by simple steps.

Note that this method will only work for self hosted video in Elementor, this won't work for Youtube, Vimeo or any other streaming platform videos.

sound on/off button functionality:-

http://mle.mallorcawebdesign.de/about-us/

https://intellia.club/

Create a new Elementor section

Click on the "+" icon in an empty section of the page and choose a desired section structure.

Add class name to the Elementor section

Click on the edit section icon to open the toolbar to the right for editing the section.
Go to the "Advanced" tab.
Under the "Advanced" dropdown add the class "herosection". The class name can be anything of your choice but it should match the class name for the corresponding section in the JavaScript code below.

Add the self hosted video to the section background

Go to the Style tab of the edit section toolbox.
Choose the Video option from the Background Type attribute.
Paste/Type the link for your video.

Add an Elementor Font Awesome Mute Icon

To your Elementor hero section with a background video.

Go in the settings, and choose that exact icon. It will be the background video sound button.

You will probably want to set the section content to full-width, and column position to 'Stretch'. This will help in positioning the icon.

Then, use absolute positioning on the icon, to place it exactly where you want. Under Advanced > Positioning, set Width to Inline(auto) and (for example), use these settings to place the icon in the lower right corner of the hero section.

Add the code to an HTML element

Drag and drop a HTML element to the Elementor page. Copy and paste the HTML code below to the HTML element.

document.addEventListener('DOMContentLoaded', function() {

var toggleSoundButton = document.querySelector('.fa-volume-mute');

var heroBackgroundVideo = document.querySelector('.herosection video');

toggleSoundButton.addEventListener('click', function (event) {

if (heroBackgroundVideo.muted !== false){

heroBackgroundVideo.muted=false;

toggleSoundButton.classList.add('fa-volume-up');

} else {

heroBackgroundVideo.muted=true;

toggleSoundButton.classList.remove('fa-volume-up');

} }); });

</script>

Only if you prefer an actual button, follow these instructions, and use the code below instead.

Add an Elementor button instead of the icon

Drag and drop a button element to a section in the page from the Elementor widget box.

Right click on the button and click on the Edit button option in the drop down.
Go to the Content tab in the Edit Button properties.
Clear the link text box of all text.

Go to the Advanced tab and open the Advanced drop down.
Type in the name "toggle_sound" for the CSS Classes attribute.

Add this code to an HTML element

Drag and drop a HTML element to the Elementor page. Copy and paste the HTML code below to the HTML element.

<style>

.toggle_sound{

cursor: pointer;

}

</style>

document.addEventListener('DOMContentLoaded', function() {

var toggleSoundButton = document.querySelector('.toggle_sound');

var heroBackgroundVideo = document.querySelector('.herosection video');

toggleSoundButton.addEventListener('click', function (event) {

if (heroBackgroundVideo.muted !== false){

heroBackgroundVideo.muted=false;

} else {

heroBackgroundVideo.muted=true;

} }); });

</script>

Wednesday, October 12, 2022

wordpress create custom post type

Here we create custom post type property.

functions.php

function my_custom_post_product() {
$labels = array(
'name' => _x( 'Properties', 'post type general name' ),
'singular_name' => _x( 'Property', 'post type singular name' ),
'add_new' => _x( 'Add New', 'property' ),
'add_new_item' => __( 'Add New property' ),
'edit_item' => __( 'Edit Property' ),
'new_item' => __( 'New Property' ),
'all_items' => __( 'All Property' ),
'view_item' => __( 'View Property' ),
'search_items' => __( 'Search Property' ),
'not_found' => __( 'No products found' ),
'not_found_in_trash' => __( 'No products found in the Trash' ),
//'parent_item_colon' => ,
'menu_name' => 'Properties'
);
$args = array(
'labels' => $labels,
'description' => 'Holds our products and property specific data',
'public' => true,
'menu_position' => 5,
'supports' => array( 'title', 'editor', 'thumbnail', 'excerpt', 'comments' ),
'has_archive' => true,
);
register_post_type( 'property', $args );
}
add_action( 'init', 'my_custom_post_product' );

now you can find "Property" menu in admin menu. Now you can use ACF advance custom fields pro plugin to create its metadada.

Wordpress create theme option

Follow this code to create theme option in your theme.

functions.php:

//create theme option
function immo_add_admin_page(){
add_menu_page( 'THeme Option', 'immo88', 'manage_options', 'main_immo', 'immo_theme_create_page', '', 110 );
//sub pages
add_submenu_page( 'main_immo', 'Immo Theme Option', 'General', 'manage_options', 'main_immo', 'immo_theme_create_page' );
add_submenu_page( 'main_immo', 'Immo CSS Option', 'Custom CSS', 'manage_options', 'main_immo_css', 'immo_setting_page' );
add_submenu_page( 'main_immo', 'Immo CSS Option', 'Social Media', 'manage_options', 'main_immo_socialmedia', 'social_media' );
add_action('admin_init','immo_custom_settings');
}
add_action('admin_menu', 'immo_add_admin_page');
function immo_custom_settings(){
register_setting('immo-settings-group', 'first_name');
register_setting('immo-settings-group', 'last_name');
//register_setting('immo-settings-group', 'twitter_handler', 'immo_sanitize_twitter_handler');
register_setting('immo-settings-group', 'immo_handler');
register_setting('immo-settings-group', 'facebook_handler');
register_setting('immo-settings-group', 'linkedin_handler');
register_setting('immo-settings-group', 'insta_handler');
register_setting('immo-settings-group', 'phone_handler');
register_setting('immo-settings-group', 'emailid_handler');
add_settings_section( 'immo-sidebar-options', 'Social Media', 'immo_sidebar_options', 'main_immo' );
add_settings_field( 'sidebar-name', 'FullName', 'immo_sidebar_name', 'main_immo', 'immo-sidebar-options' );
//add_settings_field( 'sidebar-twitter', 'Twitter', 'immo_sidebar_twitter', 'main_immo', 'immo-sidebar-options' );
add_settings_field( 'sidebar-immo', 'Immo', 'immo_sidebar_immo', 'main_immo', 'immo-sidebar-options' );
add_settings_field( 'sidebar-facebook', 'Facebook', 'immo_sidebar_facebook', 'main_immo', 'immo-sidebar-options' );
add_settings_field( 'sidebar-linkedin', 'LinkedIn', 'immo_sidebar_linkedin', 'main_immo', 'immo-sidebar-options' );
add_settings_field( 'sidebar-insta', 'Instagram', 'immo_sidebar_insta', 'main_immo', 'immo-sidebar-options' );
add_settings_field( 'sidebar-phone', 'Phone', 'immo_sidebar_phone', 'main_immo', 'immo-sidebar-options' );
add_settings_field( 'sidebar-emailid', 'Emailid', 'immo_sidebar_emailid', 'main_immo', 'immo-sidebar-options' );
register_setting('immo-settings-general-group', 'logo_image');
//add_settings_field( 'sidebar-logo', 'Logo', 'immo_sidebar_logo', 'main_immo', 'immo-sidebar-options' );
}
function immo_sidebar_options(){
echo "These data will display in header and footer";
}
function immo_sidebar_name(){
$firstname = esc_attr(get_option( 'first_name' ));
$lastname = esc_attr(get_option( 'last_name' ));
echo '<input type="text" name="first_name" value="'.$firstname.'" placeholder="First Name here" /> <input type="text" name="last_name" value="'.$lastname.'" placeholder="Last Name here" /> ';
}
// function immo_sidebar_twitter(){
// $twitter = esc_attr(get_option( 'twitter_handler' ));
// echo '<input type="text" name="twitter_handler" value="'.$twitter.'" placeholder="Twitter" /> <p class="description">Input your username without @ character.</p>';
// }
function immo_sidebar_immo(){
$immo = esc_attr(get_option( 'immo_handler' ));
echo '<input type="text" name="immo_handler" value="'.$immo.'" placeholder="immo" /> ';
}
function immo_sidebar_facebook(){
$facebook = esc_attr(get_option( 'facebook_handler' ));
echo '<input type="text" name="facebook_handler" value="'.$facebook.'" placeholder="Fabebook" /> ';
}
function immo_sidebar_linkedin(){
$linkedin = esc_attr(get_option( 'linkedin_handler' ));
echo '<input type="text" name="linkedin_handler" value="'.$linkedin.'" placeholder="LinkedIn" /> ';
}
function immo_sidebar_insta(){
$insta = esc_attr(get_option( 'insta_handler' ));
echo '<input type="text" name="insta_handler" value="'.$insta.'" placeholder="Instagram" /> ';
}
function immo_sidebar_phone(){
$phone = esc_attr(get_option( 'phone_handler' ));
echo '<input type="text" name="phone_handler" value="'.$phone.'" placeholder="Phone number" /> ';
}
function immo_sidebar_emailid(){
$emailid = esc_attr(get_option( 'emailid_handler' ));
echo '<input type="email" name="emailid_handler" value="'.$emailid.'" placeholder="Email ID" /> ';
}
// function immo_sidebar_logo(){
// $logo = esc_attr(get_option( 'logo_image' ));
// echo '<input type="file" name="logo_image" value="'.$logo.'" placeholder="Logo" /> <p class="description">Upload logo here.</p>';
// }
//sanitize
function immo_sanitize_twitter_handler($input){
$output = sanitize_text_field($input);
$output = str_replace('@','',$output);
return $output;
}
function immo_theme_create_page(){
require_once(get_template_directory().'/inc/template/immo-admin.php');
}
function immo_setting_page(){
//echo "Immo custom css";
require_once(get_template_directory().'/inc/template/immo-admin-css.php');
}
function social_media(){
//echo "Social Media Set here";
require_once(get_template_directory().'/inc/template/immo-admin-socialmedia.php');
}

***********************

create pages like this:inc/template/immo-admin.php, inc/template/immo-admin-css.php

now create admin page.

file path : /inc/template/immo-admin.php:-

<h1>Immo Theme Options</h1>

<h3 class="title">Manage General Options</h3>

general page

</form>

<?php settings_errors(); ?>

<?php settings_fields('immo-settings-general-group'); ?>

<?php do_settings_sections('main_immo');?>

<?php submit_button(); ?>

</form>

*****************************