Every Infinity theme has a theme dashboard built in. This is where you and -more importantly- the users in your network (students/teachers or anyone with a site in your multisite network) set up their theme options and find information about how to do this. We believe this dashboard is an integral part of the user experience of your community, and that’s why we give you the power to customize it extensively. Here’s what you can customize.
Easy Customizations
- Overwriting existing pages from the Dashboard
- Adding new pages to the Theme Dashboard
- Disabling or renaming existing Dashboard pages
- Disabling individual/sets of theme options
- Moving existing Theme Options around
Advanced Customizations
- Creating new Theme Options and Option Sections
- Creating custom pages that display specific theme options
- Rolling a custom Theme Dashboard style using jQuery UI and CSS
Overwriting existing pages from the Dashboard
Let’s start easy and see how we can change the existing pages on the theme dashboard. In this example we’re going to overwrite the “Start” page and add our own custom welcome message. So far in this guide we’ve been consistently been using the Child Theme overwrite magic, and guess what? We’re going to it again to overwrite the Start Page template in our Theme Dashboard!
- Copy the file dashboard/templates/screens/start.php from the Parent Infinity Theme
- Drop/Paste the file in dashboard/templates/screens/ of your Child Theme
- Open start.php and make changes to it.
- Witness the Magic and get yourself another white russian!
Well that easy right? You can modify the existing template just like you just did, or you can create one from scratch. Depending on your preference you can pick one of the following ways to create a new Dashboard page.
- Write your content using the WordPress Editor on your live site. When you’re done switch to HTML Mode and Copy and Paste the contents into your template.
- Write your content using the Markdown Language. It will automatically get parsed on the page. This is great for developers (because Markdown is also used by GitHub for example)
- Create your page using HTML and PHP. This gives you the most flexibility and allows you to use existing WordPress functions or custom code to spice up your page.
- Use our simple online writing tool (coming soon!)
You can spice up your pages with Videos (simply use the provided embed codes), images, RSS feeds or whatever you can come up with.
If you’ve created an awesome Dashboard Page you can share it with the rest of the community so the less tech savy can enjoy it.
Adding new pages to the Theme Dashboard
In the previous tutorial we’ve overwritten an existing Dashboard Page, but what about creating a completely new page? This can be easily done through an .ini file in your Child Theme. The file is called screens.ini and like all the .ini files it can be found in /engine/config in your Child Theme. Open up that file and add the following snippet to it
[videos] type = "cpanel" title = "Videos" icon_primary = "ui-icon-photo" toolbar = yes priority = 20 template = "dashboard/templates/screens/videos.php"
So what do these directives mean exactly?
- type – the type of page you want. For now cpanel is your only option
- title – the name of the page as shown in the menu
- parent nest a new dashboard page under another page in your menu
- template – the path to the template you want to use
- icon_primary – we have built in support for the jQuery UI button widget. Put in the icon name of the icon you want to show
- priority – control the menu order of your items (the higher the number the later the menu item will show in the menu.
That’s all you needs to add a new page to the Control Panel. In this example we added a new page with the name “Video Library” to the Theme Dashboard and added a nice video icon to the menu item that corresponds to this page.
By setting the priority you can arrange the order of how the menu items appear. Finally you tell Infinity which template file to load relative to your active theme folder, and that’s it!
In your template you can use PHP/HTML markup and even Markdown.
Disabling or renaming existing Dashboard pages
Infinity comes with just a few existing Dashboard pages and you might want to remove those or give them different names. Using the screens.ini file we can do exactly this. All you need to know is the page name that Infinity uses. Here’s a list of the pages that are being created.
Simply copy over the snippet into screens.ini of your Child Theme that creates the Dashboard Page you want to to modify. For example change
[docs] type = "cpanel" title = "User Docs" icon_primary = "ui-icon-document" toolbar = yes priority = 50 template = "dashboard/templates/screens/docs.php"
into:
[docs] title = "Student Docs"
This keeps all the default settings but changes the title from “User Docs” to “Student Docs”.
Completely disable a Dashboard Page
If you want to get rid of a Dashboard Page completely you can use the “ignore” directive.
[docs] Ignore = yes
Bye bye [docs] page!
Disabling individual/sets of theme options
There can be various reasons why you want to disable certain theme options. Maybe you want to keep things very simple for your users and provide them with a limited selection of theme options to set. Where other theme frameworks would require you to start hacking the theme, Infinity allows you to use the .ini files to disable the options you don’t need.
Remember how we disabled certain stylesheets from loading at the beginning of this guide? You can use the same trick to disable sets of theme options from showing up. Add the following snippet to Infinity.ini of your child theme and see what happens.
[feature] ; Options Features Infinity-core-options = on Infinity-body-layout = on Infinity-header-logo = on Infinity-header-layout = off Infinity-sidebar-layout = off Infinity-content-layout = off Infinity-footer-layout = off Infinity-main-menu-layout = off Infinity-widget-layout = off Infinity-sub-menu-layout = off Infinity-top-menu-layout = off Infinity-custom-css = on
What we’ve done here is disabling the more advanced layout options and keeping the more simple ones. Because all these “Theme Options” are turned “on” by default we can once again make the snippet even shorter by only telling Infinity which options should be turned off;
[feature] ; Options Features Infinity-header-layout = off Infinity-sidebar-layout = off Infinity-content-layout = off Infinity-footer-layout = off Infinity-main-menu-layout = off Infinity-widget-layout = off Infinity-sub-menu-layout = off Infinity-top-menu-layout = off
Wondering where you can find the theme options are their unique names? They can all be found in features.ini in the Infinity Parent Theme. (link to GitHub).
Disabling individual/sets of theme options
So what if you just want to get rid of just a single option? Simply follow these three easy steps to success:
- Find the option you want to disable (GitHub Link)
- Copy the option name into features.ini of your child theme
- Add the “ignore = yes” directive directly below the option name
This is how it looks:
[Infinity-core-options.sidebar-size] ignore = yes
Hence and repeat for other options you don’t need!
