Creating a Theme

Welcome to Step by Step Theme creating tutorial where you will learn the basic building of Theme with very simple few stpes. By the end of our documentation, you should be well on your way to creating your first Theme from scratch.

  1. Create Theme Directory
  2. List of variables that can be used in any view
  3. List of views and their corresponding variables
  4. Theme Installation
  5. Custom Hooks
  6. List of Theme Hooks

Create Theme Directory

1. To get started create a directory placed under resources/views/themes with YourThemeName.
2. Create YourThemeName.php file, views directory, assets directory in the currently created directory.
3. Next, you need to implement ThemeInterface in YourThemeName.php file and fill the details required by ThemeInterface.php.
Note: You wont be able to install your theme unless you have implemented the ThemeInterface class

  • resources
    • views
      • YourThemeName
        • assets
        • views
        • themes
        • YourThemeName.php
        • screenshot.png /* Can be a PNG or JPEG file */


/*

ThemeName.php

*/

use App\Components\ThemeInterface;

class ThemeName implements ThemeInterface
{
	public function author()
	{
		return 'Author';
	}
	public function description()
	{
		return 'This is a new Theme';
	}
	public function version()
	{
		return '0.0.1';
	}
	public function website()
	{
		return 'www.sampletheme.com';
	}
} 

Global Variables and Description

Variable Name description
$auth_user This variable can be used to access all attributes of the logged in user in the views Example: $auth_user->name
$encounter_list This variable contains details of maximum 10 user's that the logged in user has not encountered yet.
$superpower_packages This variable is an eloquent object containing a list of all superpower packages
$stripe_publishable_key This variable gives the stripe publishable key set by the Admin
$user_score This variable gives the score based on likes for the currently logged in user
$percent This variable gives the amount of percentage the logged in user has completed his/her profile
$title This variable gives website title set by the Admin
$credit This variable is an eloquent object that contains the total credit balance of the logged in user

Variables in views and Description

Route:'/register'. View Name - registration.blade.php

Route:'/login'. View Name - signin.blade.php

Variable Name description
$langs This variable contains an array of names of all the suported languages for the application
$selected_language This variable contains the name of the selected language from the landing page or else the default language set by the admin.

Route:'/encounter'. View Name - home.blade.php

Variable Name description
$user This variable contains an array element with details of the immediately next user to be encountered. The isLiked attribute is set to true if the encountered user has liked the logged in user before and vice versa
$logUser This variable is similar to $auth_user. The photos_count attribute gives the total number of photos the logged in user has in the database.
$already_encountered This variable gives the count of total user's encountered that day

Route:'/iliked'. View Name - liked.blade.php

Variable Name description
$like This variable contains an eloquent object of Model - Encounter which contains all the user's liked by the logged in user. The count attribute gives the total count of the number of user's liked by the logged in user

Route:'/likedme'. View Name - who_liked.blade.php

Variable Name description
$whoLiked This variable is a std Class object. The attribute likes contains an array of all the user's who has liked the logged in user. The attribute count gives the total count of the number of user's who liked the logged in user.

Route:'/matches'. View Name - matches.blade.php

Variable Name description
$matches This variable contains an eloquent object of Model - Match which contains all the matched user's for the logged in user. The count attribute gives the total count of the matched user's

Route:'/visit'. View Name - visitor.blade.php

Variable Name description
$visit This variable contains an eloquent object of Model - Visitor which contains all the visitors for the logged in user. The count attribute gives the total count of visitor's
$visitor_data This variable contains an array of User model objects for each visited user.

Route:'/peoplenearby'. View Name - peoplenearby.blade.php

Variable Name description
$nearByUsers This variable contains an array of all the nearby users based on the filters added.

Route:'/blockusers'. View Name - blocked_users.blade.php

Variable Name description
$blocked This variable is a std Class object with attribute users containing an array of User model objects of user's blocked by the logged in user. The attribute count gives a total count of all blocked user's.

Route:'/credits'. View Name - credits.blade.php

Variable Name description
$packs This variable is an eloquent object containing a list of all the credit packages set in the database.
$superPowerPacks This variable is an eloquent object containing a list of all the superpower packages set in the database.
$spots This variable contains an array of all User Model objects to be added in the spotlight.
$spotCredits This variable gives the amount of credits to be deducted for a user to come into the spotlight
$riseup_credits This variable gives the amount of credits to be deducted for a user to come in the top search results of people nearby.
$spotlight_screenshot This variable gives the url for the spotlight screenshot to be displayed in the page.
$riseup_screenshot This variable gives the url for the riseup screenshot to be displayed in the page.

Route:'/profile/{logId}'. View Name - profile_edit.blade.php

Variable Name description
$profile This variable is an eloquent object containing the profile details of the logged in user
$fb_friends This variable is an array of User Model objects of logged in user's friends who has logged in using facebook.
$interests This variable is an eloquent object containing all the logged in user's interests. The count attribute gives the total count of all interests.
$fb_photos_import This variable is set to true if facebook photo import is enabled by the admin or vice-versa.
$field_sections This variable is an eloquent object containing all the custom profile field sections
$visiting_details This variable is a std Class object with attributes month,week and day each giving the count of visitors for the logged in user respectively.

Route:'/profile/{userid}'. View Name - profile.blade.php

Variable Name description
$user This variable is a User Model object of the user whose profile is being visited.
$profile This variable is an eloquent object containing the profile details of the visited user .
$interests This variable is an eloquent object containing all the visited user's interests. The count attribute gives the total number of common interests between the logged in user and the visited user.
$fb_friends This variable is an array of User Model objects of visited user's friends who has logged in using facebook.
$score This variable gives the score based on likes for the visited user
$distance This variable gives the distance between logged in user and the visited user based on the latitude and longitude set at the time of login
$minimum_photo_count This variable gives the number of photos the logged in user needs to add to view more photos
$field_sections This variable is an eloquent object containing all the custom profile field sections
$visiting_details This variable is a std Class object with attributes month,week and day each giving the count of visitors for the visited user respectively.
$visit_difference This variable is a std Class object with attributes month,week and day. If the attributes are set to 1, it means that the visitor count has increased monthly,weekly or daily respectively.
$user_fields This variable is an eloquent object of Model UserFields containing all the custom profile fields set for the logged in user
$user_sections This variable is an array of stdClass objects containing the code,type and value of each user fields
$user_see_all_photos This variable is set to true if the logged in user can see all photos of the visited profile and vice versa.

Route:'/settings'. View Name - settings.blade.php

Variable Name description
$languages This variable contains an array of names of all the suported languages for the application
$notif_settings This variable contains the browser and email notification settings for types 'liked','visitor' and 'match'.
$privacy_settings This variable contains an array of 'online_status' and 'show_distance' which is set if the logged in user wants to show itself online or show its distance to other users and vice versa.
$invisible_settings This variable contains an array of 'hide_visitors' and 'hide_superpowers' which is set if the logged in user wants to hide its superpowers and profile visit and vice versa.

Theme Installation

To install the currently created theme you need to navigate to your admin panel. Under Themes category you will find your theme in Loaded Base Themes. Click on the radio button to install your theme. The contents of assets folder will automatically be moved to public/themes/ThemeName/ on installation. To get your theme live, you need to activate your theme by clicking on the radio button in status attribute under Installed Base Themes

Theme Hooks

You can use Theme::hook method to create your own hooks for internal use cases or allow other plugins to take advantage of yours. The common practice to name the hook is themename_hookname

To fire a hook:



/*

Add this to your view to render the hook

*/


Theme::render("samplethemename_newhook");


Theme Methods

All the themes must extend the App\Components\ThemeInterface. The following methods should be defined:

Theme methods description
Theme::view('plugin.pluginName.viewName') Checks if viewName exists in pluginName forlder in /resources/views/themes/theme-name
If exists the view is renderred or else the view is renderred from pluginName in App/Plugins folder
Theme::view('viewName') The view is renderred from /resources/views/themes/theme-name folder
Theme::asset('js/filename.js') or Theme::asset('css/filename.css') It returns the path of the file from public/themes/activated-theme-name
Theme::layout('layout-name') This should be used to extend a layout in a view.
It returns the path that 'extends' keyword needs to access a layout
*note: If Child theme is activated, the above methods will check for files in child-theme-name folder first.

All Theme Hooks

Hook Names description
styles Used to include specific css in a view from a Plugin or Theme

			 public function hooks()
			{
				Theme::hook("styles",function(){
				$arr = array();
				array_push($arr, Theme::asset('css/sample.css'));
				return $arr;
				});
			}
			
scripts Used to include specific script url's in a view from a Plugin or Theme

			 public function hooks()
			{
				Theme::hook("scripts",function(){
				$arr = array();
				array_push($arr, Theme::asset('js/sample.js'));
				return $arr;
				});
			}
			
scriptTags Used to include raw script code in a view from a Plugin or Theme

			 public function hooks()
			{
				Theme::hook("scriptTags",function(){
				$str = (some scripts);
				or
				array_push($str, (some scripts));
				return $str;
				});
			}
			
spot Used to display spotlight in any view. The view for spotlight is to be added in the
views folder of Spotlight Plugin

			 public function hooks()
			{
				Theme::hook("spot",function(){
				$spots = someFunction();
				return Theme::view('plugin.SpotlightPlugin.spot_view', array('spots'=>$spots));
				});
			}
			
main_menu Used to add Menu Links in the view.
1)symname - used to display the symbol at the left of the link
2)notification_type - Any link using notifications should give a notification_type and count
which displays the latest notifications count for the link
3)priority - Used to set the order in which the link will be displayed in the menu
4)class - to include css for the link
5)url - to redirect the page to the specific url on click

			 public function hooks()
			{
				Theme::hook("main_menu",function(){
				$url = url('link_route_name');            
				return array(array("title" => 'link_title', "notification_type" => '' ,  "symname" => "","count" => , "priority" => 4 , "url" => $url, "attributes" =>array("class"=>"class-name")));
				});
			}
			
login Used to add login buttons from different social networks

			Theme::hook('login', function(){
			$html = 'Link to url with css';
			return $html;
		});
			
admin_plugin_menu Used to add Menu Links in Admin Settings Dropdown.

			Theme::hook('admin_plugin_menu', function(){
			$html = 'Link to url with css for page load';
			return $html;
		});
			

Modifiers Explanation

1) Theme::render_modifier('hookName') - This basically acts as an intermediary between adding the hook and rendering it.
In the sample hook below an array of arrays is passed to hook a link with various attributes.
The modifier function takes the data passed by the hook, accesses its fields and generates a link that is returned where the hook is being renderred.

	 Theme::hook('sample',function(){
		           array(array("title" => , "url" => , "attributes" =>array("class"=>"material-icons pull-left material-icon-custom-styling")))
});

	Theme::render_modifier('sample',function($data){

			$concat = '';
			$marker = "";
			$tag = "
  • "; foreach($data as $link) { foreach($link['attributes'] as $key => $value) { if($key == "class") $marker = ' '; elseif($key == "id") $tag = '
  • '; } $l = $tag . ''.$marker . ' ' . $link['title'].''; $concat.=$l; } return $concat; });
  • 2) ClassName::formatter($type, $obj) - This is similar to render_modifier. What this does is it executes a specific function according to the type of formatter added.
    In the example below a 'sample' type of formatter is added which adds a user attribute to a data object and returns it.
    The function is pushed to an array according to the type. So when the formatter function is called in the function random(), the formatter performs the task according to the type passed as argument.
    
    		ClassName::add_formatter("sample", function($data){
    			$data->user = User::find($data->id);
    			return $data;
       		});
    
    		In ClassName.php
    	protected static $formatters = array();
    	
    	public function random()
    	{
    		$obj = new StdClass;
    		$obj->attr = '';
    		return ClassName::formatter($type, $obj);
    	}
    
    	public static function add_formatter($type,$func)
        {   
            array_push(self::$formatters[$type], $func);
        }
    
        public static function formatter($type,$obj)
        {
            foreach(self::$formatters as $key => $value)
            {
    		if($key == $type)
    	            return $func($value);
            }
        }