iDocumentor — Documentations Made Easy


Thanks for purchasing iDocumentor. We’re glad that you chose us for your product documentations. We would like to assure you that ‘iDocumentor’ is thoughtfully created and you can count on us. We’ll be adding more documentation themes in the future. And if you’ve any great theme, please provide us the link or any resources.


We’ve only one requirement for this plugin to work. You must have a working installation of WordPress.

1. Installing WordPress

WordPress is well-known for its ease of installation. Under most circumstances, installing WordPress is a very simple process and takes less than five minutes to complete. Many web hosts now offer tools (e.g. Fantastico) to automatically install WordPress for you. However, if you wish to install WordPress yourself, the following guide will help.


2. Installing iDocumentor

After you’ve downloaded ‘iDocumentor’ from the envato marketplace ‘codecanyon’, you can extract the zip file. We recommend you to choose ‘All files & Documentations’ option while downloading. Once downloaded, extract the plugin contents into your Desktop or any other location convenient to you. The folder structure looks something like this:

  • Documentations
    • assets
    • index.html
  • Package
    • idocumentor.zip
    • idocumentor

We’re interested in the ‘idocumentor.zip’ file for now which is highlighted in the folder structure above.

Now, login to your WP Dashboard.

Step 1: Go to Plugins page & Click on Add New

Step 2: Click on Upload Plugin

Step 3: Choose the ‘idocumentor.zip’ file shown in the folder structure above.

        –> Click on ‘Choose File’ and choose the ‘idocumentor.zip’ zip file from the folder structure.
        –> Click on Install now button to install the plugin.

Step 4: Finally Click on ‘Activate Plugin’.

Sample Content

We’ve provided some sample contents so that you can use them to get started quickly.

        –> Go to ‘iDcoumentor’ & click on Settings. (1)
        –> Click on Import Section from the left side menus. (2)
        –> Finally Click on ‘Import Now’ & wait while importer imports the sample content.

Note: This might take up-to 5 minutes depending upon the server and the speed of your internet.

After importing sample content, replace ‘http://wpheroes.raw-themes.com/idocumentor’ with your site url wherever you find it.

Plugin Options

We believe we’ve just enough settings to get the job done.

Go to settings through ‘iDocumentor’ > ‘Settings’.

1. Slug

Slug is useful to change the default ‘idocumentor’ slug within the permalink.

2. Clone

Enabling the ‘Clone’ option will let you clone the existing documentation/posts to make new post. It really saves your time. Getting everything through scratch is a headache.

1. Shortcode Generator

Shortcode generator helps you display the documentations/posts in grid view.
Remember, these options aren’t saved elsewhere.

  • Theme — Helps you give title to the posts grid.
  • Posts per page — Number of posts to display for the grid.
  • Category — Narrow down the posts by choosing specific category.
  • Order — Order posts by Ascending or Descending order
  • Order by — Order posts from the given criteria.

After you’ve chosen your desired options, click on ‘Generate’ button. You’ll be given a shortcode based upon your selection. Copy that code and paste anywhere in pages or posts, where you’d like to display documentations/posts.


We believe we’ve robust yet easy to use documentation creating tool 🙂 You can change documentation themes, colors, choose different fonts, colors, change preloader icons, change logo, add sticky links etc.

If you have already used ‘Sample Importer’, you’ve already imported some sample documentations. Go on, clone it, and change title, featured images, fonts, colors and most important the contents. It will help you cut half of your time for the documentation.

If you want to create documentation from scratch, here we’re trying to cover everything.

Click on ‘iDocumentor’ > ‘Add New’.

iDocumentor is solely to save your time in creating documentation. So after adding some sections your page height will be abnormally long depending upon the content. So to overcome this problem, we’ve floating ‘Update’ & ‘Preview’ buttons. After you scroll your page to some extent, it stays at the bottom of your screen so that you don’t have to spend extra time on scrolling to the top and clicking on update.

Nice little addition to improve User Experience.

1. Content

Managing your content is fairly easy. If you’re using WordPress for creating blogs or managing your site then, you’ll feel right at home. No fancy stuffs here.

2. Sections

Managing your content sections is fairly easy. Click on ‘New Section’ button to add new section.

After clicking the ‘New Section’, A new option will be presented to you where you can manage section title, icon, content and inner sections also known as steps. More on steps in a bit.

  • Section Title — Name your section. It will also serve as menu item in the sidebar navigation area.
  • Section Icon — Choose the relevant icon for section. It is also be displayed in the navigation area.
  • Section Color — Choose section title & icon color. These will reflect in the main documentation section. Also in some themes, colors are applied to navigation menu item title & icon as well.
  • Section Content — I think it pretty much describes itself. You can add any content, images, list items, links etc. Also not to forget to mention, you can add content with our shortcodes.

3. Steps

Sometimes section contents need to be divided into further more sections. To address this need, ‘Section Steps’ comes in handy. Click on ‘New Step’ to add new step (inner section) to your parent section.


After clicking on ‘New Step’, you’ll be able to manage step (inner section) content. Have a look at the step management area first.

  • Step Title — Name your inner section. Some themes display these title below their parent section in the navigation area. It serves sub sub menu item in the sidebar navigation area.
  • Step Content — I think it pretty much describes itself. You can add any content, images, list items, links etc. Also not to forget to mention, you can add content with our shortcodes here as well.

4. Styling

You can style your documentation as you like. You have options to select themes, choose preloaders, change fonts & colors, footer contents, etc. Ok lets take it one at a time.

  1. Themes — You can choose themes and enable/disable preloaders.
  2. General Settings — You can add logos & favicons for documentation. Modify navigation menu bar first item. Some author details, copyright message, option to enable or disable back to top button.
  3. Quick Links — You can add floating quick links which can hold your links. There is option to display either on left or right side of the screen.
  4. Styling — This option holds many sub options. You can manage your documentation primary and secondary colors, Font family, colors, sizes, variations, line heights etc.

Go play with settings to create some awesome documentations

5. Export

One of the striking feature of this plugin, you can export the documentation into pure HTML format as well as generate a PDF file out of it. Have you noticed something unusual with the ‘Publish Box’, have a look at it:

Yes, normal publish box doesn’t have these extra ‘Export HTML’ & ‘Export PDF’ buttons.
These buttons are pretty self explanatory, but lemme explain it quickly.


  • Export HTML — You can export the documentation into pure HTML/CSS file. Hold on! exporting HTML creates documentation file which is completely self dependent. All the images, styles & scripts are kept nice & intact. It works flawlessly without linking anything to the WordPress version. All in all, you’ll have complete offline package. Exception to Google Fonts.

  • Export PDF — You can also generate PDF out of the contents you’ve entered with this iDocumentor plugin. Though, PDF generation is somehow limited, it should look fairly similar. Cannot guarantee all the functionality will be kept intact cause of limitations with PDF.


We’ve crafted some useful shortcodes which you can use anywhere in the documentation screen. Have a look at it:

Click on ‘iDocumentor Shortcodes’ button to open the shortcode generator modal.

After the button is clicked a modal appears, which looks like:

Shortcodes we’ve carefully crafted are:

  1. Code Highlighter
  2. Alert
  3. Callouts
  4. Jumbotron
  5. Gallery
  6. FAQs
  7. File Tree

1. Code Highlighter

Code highlighter also known as Syntax highlighter is used to highlight the syntax for the language selected. Please have a look at the options available:

  • Title — Title is displayed above the syntax highlighter block.
  • Language — Choose the language for the syntax to be highlighted. Example: HTML, JavaScript, PHP etc.
  • Line numbers — Display the line number for the codes.
  • Copy Code — Enabling this option will allow you to copy the codes.
  • Content — Actual ‘codes’ to be highlighted.

Finally after adding all the contents, click on ‘Insert Shortcode’ button.

Note: The only caveat on using this shortocde is your content is decoded to preserve all the codes and spaces. Humans may not be able to read this.

Hold On!

You can convert the unreadable code into readable format. To convert it back go to https://www.base64decode.org/

Preview of Code Highlighter:

	<li><em>Demo Datas</em>
	<li><em>Theme Package</em>
			<li class="highlight"><em>theme.zip</em></li>

2. Alert

Display message in some style which grabs user attention!

  • Title — Title for alert box.
  • Icon — Choose the icon to be displayed just before the title.t b to be highlighted..
  • Alert Type — Changes the box color based upon the selection.
  • Dismissible — Let user close the alert for short time. Once the page is refreshed the alert comes back.
  • Content — Alert message to be shown.

Finally after adding all the contents, click on ‘Insert Shortcode’ button.


3. Callouts

Display message in some style which grabs user attention! Callouts are almost similar to ‘Alerts’. The only difference being the icon is displayed on their own area. You can use the editor to add any HTML.

  • Title — Title for the callout box.
  • Icon — Chose the icon to be displayed.
  • Callout Type — Changes the box color based upon the selection.
  • Content — Message to be shown in the callout.

Finally after adding all the contents, click on ‘Insert Shortcode’ button.


Some title here!

Seamlessly disintermediate dynamic manufactured products through virtual web-readiness. Dramatically initiate installed base mindshare through user friendly ideas.

4. Jumbotron

Convey message to user in some way. Contents from jumbotron shortcode is displayed in a block. It is helpful in catching user attention.

  • Title — Title for the jumbotron box.
  • Button — All the button options are useful in displaying button.
  • Content — Message to be shown in the jumbotron area.

Finally after adding all the contents, click on ‘Insert Shortcode’ button.



Efficiently engineer B2B infomediaries for backend data. Distinctively recaptiualize intuitive paradigms via leading-edge deliverables. Objectively deliver user-centric convergence without worldwide data.

Go to Support!

5. Gallery

Gallery will display list of images in grid format.


  1. Title — Gallery title.
  2. Gallery — Upload/select images to be displayed.
  3. Columns —  No. of images displayed in a single row.


6. FAQs.

FAQs shortcode is useful to display the questions and answer.


  1. Title — FAQs title.
  2. Short Description — short description about the content.
  3. FAQ Contents — Add title and content


Frequently Asked Questions.

Energistically syndicate market-driven catalysts for change with next-generation methodologies. Quickly iterate equity invested resources via high standards in systems.

Progressively conceptualize focused deliverables through performance based processes ?

Rapidiously benchmark multidisciplinary systems whereas economically sound imperatives. Credibly plagiarize dynamic models with collaborative internal or “organic” sources. Professionally re-engineer adaptive products for resource-leveling sources. Professionally network competitive action items whereas premier web services. Progressively conceptualize focused deliverables through performance based processes.

Holisticly aggregate high-quality synergy without prospective process improvements ?

Competently communicate tactical convergence for front-end leadership skills. Completely reconceptualize scalable results rather than covalent results. Uniquely plagiarize next-generation “outside the box” thinking after collaborative “outside the box” thinking. Dynamically productivate virtual relationships before resource sucking markets. Holisticly aggregate high-quality synergy without prospective process improvements.

7. File Tree.

Displays the file in tree structure:


  1. Theme — Choose theme windows|mac.
  2. Collapsible — If enabled, makes the sub lists collapsible.
  3. Content — Add the tree structure in unordered lists. We’ve pre filled this content so that you can use it without hassle.


  • Documentations
    • assets
    • index.html
  • Demo Datas
    • accessories
    • fashion
    • electronics
  • Licensing
  • Plugins
    • revslider.zip
    • raw-tool-box.zip
  • Theme Package
    • theme.zip
    • child-theme.zip
    • theme
    • child-theme


Version 1.0.0
  -- Initial release


Fonts & Icons

Google Fonts


Bootstrap Material