1. Home
  2. Docs
  3. Building a Free Support Website
  4. Plugin “weDocs”

Plugin “weDocs”

Before I looked into service desk plugins for WordPress, I researched documentation plugins. I ran into weDocs first. It was free so I tested it. I was not too fond of it at first because the styling was not satisfying me and it does not allow for any adjustments or custom CSS. Another product, Documentor, popped up a lot in my search as well. It is not free though so I gave weDocs another try because the challenge was to stay with free products where possible.

My second attempt to build on weDocs was more successful, accepting that I needed to patch some code myself and add custom styles using Neve. And that’s the beauty of open source – you can do all that if you know your way around.

weDocs organizes the documentation into “Docs” which represents a user manual if you will. In there you can create “sections” which I consider to be branch in that manual. In each branch you can add “articles”. Docs, sections and articles are editable WordPress pages only that they are automatically related to each other in a parent/child relationship. See this screenshot of the weDocs backend page:


The most important thing though is to show the page structure in a navigation pane, usually on the left. And I like the way how weDocs does that. I only adjusted the styles a bit. Here is what it looks like:


As an entry page with an overview of all Docs, weDocs installs a page with just the [wedocs] shortcode. That page really did not look nice in combination with Neve. All was compressed on the left side and the design did not match my needs. So I removed the shorttcode and added Bootstrap callout blocks linking to the appropriarte docs. See here: Docs page.

I ended up with the following style changes for weDocs that I added via the Neve customizer:

.obfx-grid-author > i, .obfx-grid-date > i {
   margin-right: 10px;
   color: #999;
   font-size: 14px;

.obfx-grid-footer a {
   color: inherit !important;
   font-family: inherit !important;

.wedocs-single-wrap .wedocs-sidebar ul.doc-nav-list li ul.children {
   border-left: 0px;

.wedocs-single-wrap .wedocs-sidebar {
   padding: 1%;

.wedocs-single-wrap .wedocs-single-content {
   width: 100%;
   border-left: 1px solid #eee;
   padding: 1%;

.wedocs-single-wrap .wedocs-single-content ol, .wedocs-single-wrap .wedocs-single-content ul {
   padding-left: 24px;
   padding-bottom: 20px;

.wedocs-single-wrap .wedocs-sidebar h3.widget-title {
   font-weight: 600;

.wedocs-single-wrap .wedocs-single-content article .entry-content img {
   background: none;
   max-width: 100%;
   border: 0px;
   margin: 0px;
   padding: 0px;
   height: auto;
   display: block;

.wedocs-single-wrap .wedocs-single-content article .entry-content img.alignleft {
   padding: 0px 16px 16px 0px;

.wedocs-single-wrap ul, .wedocs-single-wrap ul.children {
   list-style: square;

.wedocs-feedback-wrap {
   text-align: left;

.wedocs-single-wrap .wedocs-single-content article footer.entry-footer.wedocs-entry-footer time {
   float: left;

.wedocs-single-wrap .wedocs-sidebar ul.doc-nav-list > li.current_page_parent > a,
.wedocs-single-wrap .wedocs-sidebar ul.doc-nav-list > li.current_page_item > a,
.wedocs-single-wrap .wedocs-sidebar ul.doc-nav-list > li.current_page_ancestor > a {
   background: #0060b0;
.wedocs-search-input input.search-field {
   padding: 16px;

.wedocs-search-in select#search_in_doc {
   background: #ffffff;


Was this article helpful to you? Yes 1 No

Leave a Reply

Your email address will not be published. Required fields are marked *