Making a document in Codex is quite simple. There are a few options to set, hence this document looks a bit longish, but they are all very straightforward. You could very easily just skim this document and get the gist of it.
Add a new Codex Document
Add a new Codex Document
To create new Codex document, go to the Codex section click New Codex Document.
Enter a title
Enter a title
Enter a title for the document.
Enter introduction
Enter introduction
If needed, enter an introduction for the document.
Choose the layout
Choose the layout
Each document has a specific layout for the steps in it. The layout you choose is applied to all steps; however, you don't have to have content in each section in each step.
Layouts are broken into 3 sections. Each section can contain a description, an image or video, or code which you can assign per document.
Choose what content to show in each section
Choose what content to show in each section
These the dropdowns enable you to choose what the content type is for each of the sections.
Set a Title Prefix
Set a Title Prefix
If you'd like to prefix the step titles with some text, e.g te step number, then enter it here.
To display the step number itself, enter %number%.
For example:
Step %number%:
would prefix the titles with Step 1: , Step 2: , Step 3: , etc.
Set title to full width or not
Set title to full width or not
Step titles can be set to display the full width of the step, or only above the description.
Set maximum image width
Set maximum image width
To prevent loading full sized images, set the maximum width. Max height will be automatically set to twice the max width.
The original image will still show in the lightbox view.
Preserve Layout
Preserve Layout
With setting enabled, layouts will retain their basic structure.
If you turn it off, they will expand to fill empty sections.
For example, a three column layout would still be three columns, but some empty columns for sections with no content. Whereas, with this disabled, those steps would appear like two or one column layouts.
You can see an example of this in this document at the step "Create the Steps"
Set Lightbox popup for images when clicked
You can choose whether images open in a Codex's built-in lightbox when clicked. Otherwise, nothing happens.
Choose the Step theme
Choose the Step theme
Codex comes with default styling. If you with to use your own, then set this to Custom. You will then need to define the stylings in your own stylesheet.
Also, Codex will inherit a some styling from your theme.
Choose the Code theme
Choose the Code theme
You can select a styling for the code. This styling is provided by the HighlightJS library; however, only a small subset of them.
Set Codex categories
Set Codex categories
Like post categories, Codex documents can also have their own categories. These are useful for grouping related documents. E.g you might have a category called Getting Started for all the documents on how to get setup and started with your product.
Set Codex tags
Set Codex tags
Codex tags give you another way to identify and catalog your documents.
Set Page Order
Set Page Order
WordPress, as yet, doesn't have a simple method of managing page order. Instead, to do so, you have to manually number each page - or in our case each document - in the order you want it to appear.
And then when displaying document lists (with widgets or shortcodes), you select page order as the orderby method.
In this way, you can create a category like Getting Started, where you can list the documents in the order they should be read.
Set a Featured Image
Set a Featured Image
Codex documents can also have a featured image. Your theme will control how it is displayed.
Create the Steps
Set this step as a header
Sometimes you might have a long document that you'd like break into sections.
If you enable Set this step to a header, then all following steps until the next header will be indented.
With CSS classes, you can also add additional styling.
Add a step Title
Add a step Title
Firstly, give the step a title.
Add a Step Description
Add a Step Description
If you are using the Description, add it next.
Using the Step Description WYSIWYG editor
Using the Step Description WYSIWYG editor
The code library that handles the non-standard WordPress fields in Codex, doesn't yet support direct WYSIWYG editing of the Description field.
However, if you need to edit the Description in a WYSIWYG editor, simply click the pencil icon at the bottom right of the description
Choose and image or video
Choose and image or video
Next choose the Media (image or video) to display for the step.
If your image or video has a caption, it will be shown automatically below it when the document is displayed.
Add Step Code
Add Step Code
If you have code for the step, enter it here.
Add Step Code Caption
Add Step Code Caption
The code display can also be captioned.
Save Draft
Save Draft
At this point it is a good idea save your work by clicking Save Draft
Add a new Step
Add a new Step
You can add further steps by clicking the Add new step button.
Add the remaining steps for your document.
Remember to save regularly!
Remove a Step
Remove a Step
At any time, you can remove a step by clicking the either the Remove Step button, or the red X in the top right of the step.
Reorder Steps
Reorder Steps
You can also reorder your steps by clicking the ordering buttons
(1) Move the step up one position.
(2) Move the step down on be position.
Publish
Displaying your document