Check out our brand new plugin, WPHelpful, and collect feedback on your courses.

Custom Styling

While we don’t offer support for your custom CSS, here are a few examples of how to further style your buttons and showing which lessons are complete or not.


a.wpc-button { // this is the style for all WPC buttons. }

a.wpc-complete { // JUST for incomplete buttons. }

a.wpc-completed { // JUST for completed buttons }

So, to add a rounding to all, buttons, you could do this:

a.wpc-button { border-radius: 20px; }

Or, if you wanted to make the text on your completed buttons much larger than your incomplete buttons, you could do this:

a.wpc-completed { font-size: 50px; }

The other thing you can do with CSS quite easily is add custom styles for how your course shows links to other lessons, and whether or not they’re complete. The CSS used is this:

.wpc-list { // added to any list with completable lessons. }
.wpc-list li { // added to any list with completable lessons for each lesson. }
li .wpc-lesson { // added to any list item that links to a completable lesson. }
li .wpc-lesson-complete { // JUST for incomplete lesson links. }
li .wpc-lesson-completed { // JUST for completed lesson links. }

By default WPC adds a check mark to completed lessons and fades them by 50%. To style them further, say, to add a different colour to incomplete lessons and add a strike-through to completed lessons, here’s the CSS you could use:

li .wpc-lesson-complete { color: red; }
li .wpc-lesson-completed { text-decoration: line-through; color: grey; }

You can also completely deregister all WPC CSS, but only do this knowing we cannot support our plugin with this enabled (do so at your own risk):

wp_deregister_style( 'wpcomplete' );

You can take this much further with your own CSS in your functions file, or have your developer help out to further match your theme to what your students see that WPC adds to your course.

Happy coding!

Return to support

Want 10% off the PRO version of WPComplete, just for hopping on our list?

No spam or BS, just product update emails.