How to Add Custom Option in Weebly Theme

Custom option in weebly theme gives admin the flexibility to choose and define different options for your theme. For example if you want to give theme user the ability to change background color of navigation menu then you can add custom option in weebly theme so that the user can easily define / change background color of navigation menu without editing the code. In this blog post we will define a custom option in weebly theme so that the user can make Logo and Navigation Menu either Block or Inline. If Block option is selected then logo and navigation menu will appear on top of each other, and if Inline option is selected then logo and navigation menu will appear in one line. Comparison is shown in following images:

Please Note that your theme may use different classes, ID’s and layout structure so change the codes accordingly. This Tutorial is only to explain the concept to add custom option in weebly theme.

Code with Explanations to add Custom Option in Weebly Theme

Manifest.json Code to add Custom Option in Weebly Theme

First we have to define the variable in manifest.json file which is available in Assets Folder of weebly code editor. It will be a select variable having values ‘Block’ and ‘Inline’ with default value of ‘Block’. This select variable defined in manifest.json file will add a class ‘variablename-value’ in body tag, then we can use this class to design logo and navigation menu accordingly. Following code will be added in manifest.json file inside custom-options array to define this custom option in Weebly theme:

{
“name”: “menulogoappearance”,
“title”: “Menu Logo Appearance”,
“type”: “dropdown”,
“default”: “block”,
“choices”: [
{
“value”: “block”,
“title”: “Block”
},
{
“value”: “inline”,
“title”: “Inline”
}
],
“is-body-class” : true,
“is-less-var” : false
}

as shown in following image:

Manifest.json code: Add Custom option in weebly theme

Css Code to Add Custom Option in Weebly Theme

Now that we have defined the variable in manifest.json file and this variable will add a new class in body tag, for example if user selects ‘Block’ option then new class added in body tag will be menulogoappearance-block otherwise it will be menulogoappearance-inline. Now we will use that class to design menu and logo appearance accordingly. Following code is added at the bottom of main.less (new themes) or main_style.css (older themes) to add this custom option in weebly theme:

body.menulogoappearance-inline #sitename, body.menulogoappearance-inline #navigation{
   width: 48%;
   display: block;
   float: left;
}

body.menulogoappearance-inline #header {
padding-top: 0px;
padding-bottom: 10px;
overflow: hidden;
}

body.menulogoappearance-inline div#sitename {
text-align: left;
padding-left: 20px;
}

body.menulogoappearance-inline div#navigation {
padding-bottom: 0;
margin-top: 15px;
text-align: right;
}

Html Templates Code to Add Custom Option in Weebly Theme

Html Template code we have in our demo theme for logo and menu is as shown below :

Result : Below Image Shows that New Custom Option is Added

Video Tutorial:

This video tutorial explains how to add custom theme options in weebly website. As an example we added 2 custom options (Header Color and Header Height). These options allow theme user to define / change header background color and header height using Theme Options page.

That’s all, If you have any questions then please let me know in comments.

Please Note that your theme may use different classes, ID’s and layout structure so change the codes accordingly. This Tutorial is only to explain the concept to add custom option in weebly theme.