How to create WordPress tabs from an XML file

Last updated on

This tutorial will guide you how to create WordPress tabs from an XML file. There are 4 steps in this tutorial:

  • Step 1 - Install Wonder Tabs
  • Step 2 - Create an XML file
  • Step 3 - Upload the XML file to your WordPress web server
  • Step 4 - Create WordPress tabs from the XML file URL

Step 1 - Install Wonder Tabs

First please install the plugin Wonder Tabs. You can download the free version from the product home page, test it, make sure it works for you before upgrading to the commercial version.

Step 2 - Create an XML file

Using XML allows you to define content list for your WordPress tabs. An XML file is actually a text file. You can export an existing tab group to an XML file in Wonder Tabs, or you can create the XML file from scratch.

To export a tab group to an XML file, in your WordPress backend, goto left menu Wonder Tabs -> Import/Export. In the Export tab, choose the option "Select a tab group", select a tab group, check the option "Export content list to an XML file", then click the button "Export".

export WordPress tabs to xml

You can also create the XML file by using an XML editor. The format of the gallery XML file is as follows:

<list>
	<item>
		<type>0</type>
		<tabtitle><![CDATA[Tab 1]]></tabtitle>
		<tabcontent><![CDATA[Content for tab 1]]></tabcontent>
		<pageid>-1</pageid>
		<tabicon>fontawesome</tabicon>
		<tabiconfontawesome>fa-birthday-cake</tabiconfontawesome>
		<tabiconimage></tabiconimage>
		<tabiconimagewidth>48</tabiconimagewidth>
		<tabiconimageheight>48</tabiconimageheight>
	</item>
	<item>
		<type>0</type>
		<tabtitle><![CDATA[Tab 2]]></tabtitle>
		<tabcontent><![CDATA[Content for tab 2]]></tabcontent>
		<pageid>-1</pageid>
		<tabicon>fontawesome</tabicon>
		<tabiconfontawesome>fa-group</tabiconfontawesome>
		<tabiconimage></tabiconimage>
		<tabiconimagewidth>48</tabiconimagewidth>
		<tabiconimageheight>48</tabiconimageheight>
	</item>
</list>

The above XML adds two tabs. You could use <![CDATA[ and ]]> around the XML value to escape the text.

The available XML keys are as follows:

Key Description
type 0: text/html code content
1: page tab
tabtitle title of the tab
tabcontent content of the tab
pageid ID of the page if the type equals 1
tabicon image: use the value of tabiconimage as image URL of the icon
fontawesome: use the value of tabiconfontawesome as the icon
tabiconfontawesome fontawesome icon
tabiconimage icon image URL
tabiconimagewidth width of the icon image
tabiconimageheight height of the icon image

Step 3 - Upload the XML file to your WordPress web server

By default, WordPress does not allow you to upload an XML file to the Media Library, so you need to upload the XML file to your web server via FTP.

You can create a folder in your WordPress ftp server, upload the XML file to this folder, then get the URL of the file. For example, if you create a folder xmlfiles in your WordPress folder, you upload the XML file wonderplugin_tabs_filelist_1.xml to this folder, the URL will look like:

http://www.yourdomain.com/xmlfiles/wonderplugin_tabs_filelist_1.xml

Please test your URL by visiting it with your web browser and make sure it works before proceeding to the next step. If the URL works fine, it will display the XML file content.

Step 4 - Create WordPress tabs from the XML file

Once you have confirmed the XML file URL is correct, In Wonder Tabs, create a new tab group, in step 1, click the button Import XML, and enter the XML file URL.

create wordpress tabs from xml

Publish the tab group, add the generated shortcode to a WordPress page or post.