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:

wedocs-backend

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:

wedocs-frontend

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:


/*
 * WEDOCS CUSTOM STYLES
 */
.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 {
   border-radius:8px;
	 font-size:inherit;
	 padding: 16px;
	 margin-bottom: 16px;
}

.wedocs-search-in select#search_in_doc {
   border-radius:6px;
   background: #ffffff;
}

 

Was this article helpful to you? Yes 2 No

4 thoughts on “Plugin “weDocs””

  1. This is really useful – thanks for putting this up. I too am installing weDocs for tutorials etc but am not a dev.
    My theme is Punte but like you I find the styling not quite right. The doc articles are not full width, the left column too tight and the fonts not great.

    Your Docs page & articles look great, so I figured I could copy your CSS and paste it as custom CSS.

    I’ve done this and… see no change. Am I missing something?

    Many thanks for your help (sorry if it’s a dumb question)

  2. Hi Chris,
    for the page width and navbar width you need to play with your theme. The styles I posted above are more weDocs touch-ups.
    Maybe you can play around with the Neve theme just to see if it comes closer to what you want.
    I haven’t used Punte yet.
    Best regards,
    George

  3. Thanks George,
    I followed your advice and switched to Neve and that has resolved the right sidebar issue. Although I used your CSS it is still putting the section titles in a blue box (as in your screenshot above) but I want them to appear like your actual docs which are a lot better. How do I change these sidebar section display? Also, what font are you using in your docs?

    1. Hi Chris,
      I updated the custom CSS above to what I am using now. Try to copy it again.
      Best regards,
      George

Leave a Reply

Your email address will not be published.