wpDiscuz allows you to customize the all three layouts and three styles by customizing comment template files and the main style.css file. The template and CSS files are located in the Default theme. The template files are PHP files that contain a mixture of HTML, Template Tags, and PHP code. When you are building your custom comment system theme, you will use template files to affect the layout and design of different parts of your comment section.

You can edit these files in an upgrade-safe way using overrides. Just copy the style.css or any template file you need to a folder within your current active WordPress theme named /wpdiscuz/ and start to customize. When you copy other template files which are located in folders you should create the same folders in the target /wpdiscuz/ folder too. You should keep the same folder/file structure.

Example: To customize the comment avatar section of the Layout #1, copy this template file:

/wp-content/plugins/wpdiscuz/themes/default/layouts/1/avatar.html

and paste to:

/wp-content/themes/mytheme/wpdiscuz/layouts/1/avatar.html

The copied files will now automatically override the wpDiscuz default template files. All changes in this file will not be lost on plugin update.
Note: Do not edit these files within the core plugin itself as they are overwritten during the upgrade process and any customizations will be lost.

wpDiscuz Theme and Template Files

wpDiscuz themes are located in /wpdiscuz/themes/ directory. At the moment there is only one theme (one folder) /default/. This is the default wpDiscuz theme, it contains following files:

Style CSS Files

• style.css (The main style sheet of the Default theme)
• style-rtl.css (RTL version of the main style sheet)
• /css/style-minimal.css (Minimum style CSS file)
• /css/style-minimal-rtl.css (RTL version of the Minimum style CSS file)

PHP Files

• class.WpdiscuzWalker.php (wpDiscuz custom walker class, that extends the Walker_Comment class, gives you the ability to override the default comment structure)
• comment-form.php (Comment form builder PHP file. We recommend customize comment form using wpDiscuz comment form builder API located in Dashboard > wpDiscuz > Forms admin page)

Comment Layout HTML Files

Almost all customization of comment design and structure can be done using comment layout files. wpDiscuz 7 comes with three comment layouts. Layouts template files are located in themes’ /layouts/ folder. In the Default theme’s /layouts/ folder you can find three layouts with separate folders. By default, your comment system uses the Layout #1. Therefore, you should use template files of /1/ folder in the wpdiscuz/themes/default/layouts/ directory. You can manage comment layout in comment form settings. Depended on your selected layout, you should customize template files from corresponding folders:

• Layout #1: wpdiscuz/themes/default/layouts/1/
• Layout #2: wpdiscuz/themes/default/layouts/2/
• Layout #3: wpdiscuz/themes/default/layouts/3/

 

Each layout contains all template files for each comment component separately. These template files only contain HTML code. All dynamic components are provided as shortcodes. These shortcodes are being replaced with dynamic data and displayed on comment list. For example the {DATE} shortcode is replaced with a real comment posting date 3 week ago. You should not make any change with this shortcodes. You can add new HTML code or change the default HTML code. Also, you can remove any component and shortcode you want. This is the list of layouts template files. File names already say what they are used for: author.html, avatar.html, date.html, follow.html, footer.html, header.html, index.html, label.html, left.html, link.html, reply.html, reply_to.html, right.html, share.html, status.html, text.html, toggle.html, tools.html, vote.html, wrapper.html