How to create your own custom pod

There are three types of pods that can be created within your uSkinned theme. 

  • Page Pods which can be added via the Pods Component.
  • Footer Pods which can be added to the footer section of your website.
  • Reusable Pods which are created below Website Configuration > Reusable Content > Pods and can then be reused across your site and added to Pods sidebars or the Pods Component mentioned above.

To maintain consistency we recommend that if you are creating your own Pod functionality that you create a version of this new Pod for each of the three pod types mentioned above. If you are sticking to this structure then the content properties for each type of pod should be identical so that you can reuse the same partial view code for rendering the output of this pod when it is added to a page by your content editors.

Step 1

Login to CMS.

Step 2 

Go to Settings.

Step 3

Expand Document Types > Nested Content > Page Pods.

Step 4

Add the new document type for your page pod and name it. End the alias name for the new Document type with 'USN_NC_' e.g. 'USN_NC_MyNewPod'.

Step 5

Add the content and settings options required for your new pod. Make sure you go to the Permissions tab on your new document type and select 'Is an element type'. This ensures this pod can be used as a nested content item.

Step 6

Expand Document Types > Nested Content > Footer Pods.

Step 7

Add the new document type for your footer pod and name it. End the alias name for the new Document type with 'USN_NCF_' e.g. 'USN_NCF_MyNewPod'.

Step 8

Add the content and settings options required for your new pod. Make sure you go to the Permissions tab on your new document type and select 'Is an element type'. This ensures this pod can be used as a nested content item.

Step 9

Expand Document Types > Website Configuration > Reusable Pods.

Step 10

Add the new document type for your page pod and name it. End the alias name for the new Document type with 'USN_SWP_' e.g. 'USN_SWP_MyNewPod'.

Step 11

Add the content and settings options required for your new pod. This type of pod is not used as nested content so do not enable 'Is an element type' on this occasion.

 

Now that you have created your three types of pods you are ready to allow these to be selected by your content editors.

 

Step 12

Expand Data Types > USN Data Types > Nested Content > USN Nested Pods.

Step 13

Add your new element type with alias starting 'USN_NC' and save your change.

Step 14

Expand Data Types > USN Data Types > Nested Content > USN Nested Footer.

Step 15

Add your new element type with alias starting 'USN_NCF' and save your change.

Step 16

Expand Document Types > Website Configuration > Reusable Pods Folder.

Step 17

Go to permissions tab and add your new reusable pod with alias starting 'USN_SWP' as an allowed child node type.

 

You are now ready to update and create new partial views to handle the output of your new pods.

 

Step 18

Still in 'Settings', expand Partial Views > Expand the folder of the theme you are working on e.g. USN_Fabric > Expand USNPods.

Step 19

Create the new file for your pod and name it. It is recommended to copy one of the existing partial views in this folder and edit it for your own requirements as this will give you the basic structure to follow. Add the relevant code for your new pod. This partial view will be reused for each of the three different ways a pod can be added to a page.

Step 20

Still in 'Settings', expand Partial Views > Expand the folder of the theme you are working on e.g. USN_Fabric > Expand USNPods > Open USN_SitewidePods.cshtml 

Step 21

Add a new case statement to output your new reusable pod within a web page sidebar.

Step 22

Still in 'Settings', expand Partial Views > Expand the folder of the theme you are working on e.g. USN_Fabric > Expand USNPageComponents > Open USN_PC_Pods.

Step 21

Add a new case statement to output your new page pod.

Step 22

Still in 'Settings', expand Partial Views > Expand the folder of the theme you are working on e.g. USN_Fabric > Expand USNWebsiteFooterSection > Open USN_FooterSection.

Step 23

Add a new case statement to output your new footer pod.

Step 24

Still in 'Settings', expand Partial Views > Expand the folder of the theme you are working on e.g. USN_Fabric > Expand USNPods > Open USN_P_ReusablePods.cshtml 

Step 25

Add a new case statement to output your new reusable pod within a reusable pod component.

Step 26

Try adding your new pod to a pod component, footer or sidebar. This is obviously quite a complex process since pods can be used in varying places throughout your site. This guide is to help you follow the structure we use within our themes and to highlight where changes should be made. The exact process you use will vary depending exactly how you want your pods to work.

Get started today

Join thousands of agencies, freelancers, enterprises & start ups worldwide who use uSkinned Umbraco themes to deliver results.

NEW Themes Released

We have launched new themes and released major updates.