Blog

Creating Your Own Custom Templates

ProfileGrid allows you to customize its look and feel using its dedicated template files. Editing these files will require you to have some knowledge of HTML, CSS and PHP code. So if you know how to tinker with the code, you can get the exact look that you want for your ProfileGrid interface. This will make it unique and stand out from the rest.

Let us move forward and see what steps we need to follow to create our own ProfileGrid template.

Locating the Plugin’s Root Directory

First of all, you need to access the files on your website. There are many tools available to access your site files, so choose whichever one you like the most. Then, access the ‘wp-content‘ directory of your WordPress site. Inside ‘wp-content‘, there will be the ‘plugins‘ directory. Inside ‘plugins‘, look for the directory ‘profilegrid-user-profiles-groups-and-communities‘. This is the root directory of the ProfileGrid plugin.

Finding & Copying the Template Files

From the plugin’s root directory, copy the directory ‘default‘ that is inside ‘[plugin root]/public/partials/themes‘. This ‘default‘ directory contains all the default PHP template files for ProfileGrid’s frontend layouts. Once you have copied this directory, paste it into ‘[your current theme directory]/profilegrid-user-profiles-groups-and-communities/themes‘ directory. If this directory doesn’t exist already, you can create it.

Important: Don’t forget to rename the pasted directory from ‘default‘ to the name of your choice. This will ensure that you see the template by its proper name in ProfileGrid backend once you get to select it.

You can now edit the code in these files to set the design according to your liking.

Activating the Custom Template

Now that you are done editing the code in the files, all you need to do is to activate the custom template from the ProfileGrid backend. To do that, login to your WordPress Dashboard and hover over the ‘ProfileGrid‘ Dashboard menu. This will reveal the complete list of menus under ‘ProfileGrid‘. Click on ‘Global Settings‘ menu to access the Global Settings page of ProfileGrid. Inside Global Settings, click on ‘General‘ settings icon.

General‘ settings contain the option to select the template. Your new template’s name will appear in the dropdown next to the ‘Template‘ option. Select it and save the changes. Your new ProfileGrid template design will now appear on the site frontend.

  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  

Leave a Comment

Your email address will not be published. Required fields are marked *