Quick Instructions Full Instructions Full Instructions with Images
Overview
Here you’ll find the documentation to use the Better Docs Plugin by Coded!  Below is the steps to add this plugin into your WordPress install.  This page uses the Better Docs plugin so you can see it in action for yourself.
Preparing the plugin.
   
  • After downloading the plugin (here), unzip the download into your plugins directory.
  • Log into your WordPress administration panel (Usualy {your url}/wp-admin)
  • Choose “Plugins” from the left side menus.
  • You should see “Coded! Better Docs” available.
    • Activate Better Docs
  • Click “Activate”
    • Activated Plugin
 
Using Coded! Better Docs
  • To demonstrate how to use the Better Docs plugin, we’ll create a new page. Click “Pages”.
  • Once on pages, click “Add New”.
  • On the Editor, there are 3 new buttons.
  • We’ll start by setting the background the Better Docs will effect.  Click “{F}”  .
    • You’ll now see the buttons that will be visible across the top for the public.  The very light grey box underneath defines the are the Better Docs will effect.
  • Add some text to the light grey box, highlight the important part and click “{B}”
  • Adding images uses the same process but use the “{ I }” option instead.
  • Save your work and “Publish” or “Update” your work and Preview your work.  Checking the published page and you should see something similar the the image below.
Editing the CSS
To edit the css for the public side of Coded! Better Docs, all you need to do is add some CSS to your child theme and it will overwrite the standard layout. The standard layout is: .coded_full{ color: lightgrey !important; cursor: pointer } .coded_basic { cursor: pointer } .coded_image { border: 2px solid grey; padding: 2px; } table { width:100%; } td{ width: 28%; margin: 2%; text-align: center; } .docButtons{ float: left; position: relative; padding: 8px; border: 1px solid #d9d9d9; background-color: #f4f4f4; cursor: pointer; text-align: center; } .coded_full_format { color:black !important; } .coded_quick_format { color: black } .coded_image_format {}