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
To create new Codex document, go to the Codex section click New Codex Document.
Enter a title
Enter a title for the document.
Enter introduction
If needed, enter an introduction for the document.
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
These the dropdowns enable you to choose what the content type is for each of the sections.
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
Step titles can be set to display the full width of the step, or only above the description.
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
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
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
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
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
Codex tags give you another way to identify and catalog your documents.
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
Codex documents can also have a featured image. Your theme will control how it is displayed.
Create the Steps
Now that you have all the basics of the document defined, you can move onto adding 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
Firstly, give the step a title.
Add a Step Description
If you are using the Description, add it next.
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
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
If you have code for the step, enter it here.
Add Step Code Caption
The code display can also be captioned.
Save Draft
At this point it is a good idea save your work by clicking Save Draft
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
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
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
Once you are happy with your document, you can then Publish it.
Displaying your document
Your theme should be able to display your Codex document without modification.
To enable your site visitors to view your document, you should add it to a menu or widget.
These tutorials provide guides to doing that: