In a continuation of giving my MainWP plugins some love, I have been working on MainWP Client Notes for the pro report and tidying up the issues I have with, and one I couldn’t get right during its initial release was getting the work notes to show contained within the child site settings.
I inspected several plugins and couldn’t get a working solution even though I was sure I had set everything up as it should be; as with all these things, the fix turned out to be easier than I had expected.
I already had them listed in the child site, but when clicked, it would be a full page rather than in the green boxed area in the image above recently I joined the MainWP Discord group, where they answer some quite technical questions and are helpful on coding extensions and customisations (they live and Breathe openness here, not just open source).
I asked the question, and within 24 hours, how I was going wrong was shown to me, in the code below, you will see the original and the changed code, specifically a modification to the div class, and you have to top and tail your “window” with the header and footer from MainWP and it will render as intended.
// Renders the actual content of the Work Notes page
public static function render() {
$current_wpid = MainWP_System_Utility::get_current_wpid();
if (!MainWP_Utility::ctype_digit($current_wpid)) {
return;
}
// Fetch existing work notes for the child site
$notes_key = 'mainwp_work_notes_' . $current_wpid;
$notes = get_option($notes_key, array());
// Display the entire Work Notes section inside a container div
echo '<div id="mainwp_tab_WorkNotes_container">';
// Display the form to add/edit a note
echo '<form id="work-notes-form" class="ui form" style="padding: 20px; max-width: 95%; margin: 0 auto;">';
echo '<input type="hidden" name="wpid" value="' . esc_attr($current_wpid) . '">';
echo '<input type="hidden" name="note_id" value="0">'; // Hidden input for note ID
echo '<div class="field">
<label for="work_notes_date">Work Date:</label>
<input type="date" name="work_notes_date" required style="width: 100%;">
</div>';
echo '<div class="field">
<label for="work_notes_content">Work Details:</label>
<textarea name="work_notes_content" rows="5" required></textarea>';
echo '</div>';
echo '<button type="button" id="save-work-note" class="ui button green">Save Work Note</button>';
echo '</form>';
// Display existing work notes
echo '<h3 class="ui dividing header">Existing Work Notes</h3>';
echo '<table class="ui celled table">';
echo '<thead><tr><th>Date</th><th>Details</th><th>Actions</th></tr></thead><tbody>';
foreach ($notes as $index => $note) {
echo '<tr>';
echo '<td>' . esc_html($note['date']) . '</td>';
echo '<td>' . esc_html($note['content']) . '</td>';
echo '<td>
<button class="ui button blue edit-note" data-note-id="' . $index . '">Edit</button>
<button class="ui button red delete-note" data-note-id="' . $index . '">Delete</button>
</td>';
echo '</tr>';
}
echo '</tbody></table>';
echo '</div>'; // Close the container div
}
}Below is the change code, not the adding of a header at line 2 and a footer at line 47 and a modification for a class of UI segment to line 13, and this was all that was necessary to render the page as intended.
public static function render() {
do_action('mainwp_pageheader_sites');
$current_wpid = MainWP_System_Utility::get_current_wpid();
if (!MainWP_Utility::ctype_digit($current_wpid)) {
return;
}
// Fetch existing work notes for the child site
$notes_key = 'mainwp_work_notes_' . $current_wpid;
$notes = get_option($notes_key, array());
// Display the entire Work Notes section inside a container div
echo '<div id="mainwp_tab_WorkNotes_container" class="ui segment">';
// Display the form to add/edit a note
echo '<form id="work-notes-form" class="ui form" style="padding: 20px; max-width: 95%; margin: 0 auto;">';
echo '<input type="hidden" name="wpid" value="' . esc_attr($current_wpid) . '">';
echo '<input type="hidden" name="note_id" value="0">'; // Hidden input for note ID
echo '<div class="field">
<label for="work_notes_date">Work Date:</label>
<input type="date" name="work_notes_date" required style="width: 100%;">
</div>';
echo '<div class="field">
<label for="work_notes_content">Work Details:</label>
<textarea name="work_notes_content" rows="5" required></textarea>';
echo '</div>';
echo '<button type="button" id="save-work-note" class="ui button green">Save Work Note</button>';
echo '</form>';
// Display existing work notes
echo '<h3 class="ui dividing header">Existing Work Notes</h3>';
echo '<table class="ui celled table">';
echo '<thead><tr><th>Date</th><th>Details</th><th>Actions</th></tr></thead><tbody>';
foreach ($notes as $index => $note) {
echo '<tr>';
echo '<td>' . esc_html($note['date']) . '</td>';
echo '<td>' . esc_html($note['content']) . '</td>';
echo '<td>
<button class="ui button blue edit-note" data-note-id="' . $index . '">Edit</button>
<button class="ui button red delete-note" data-note-id="' . $index . '">Delete</button>
</td>';
echo '</tr>';
}
echo '</tbody></table>';
echo '</div>'; // Close the container div
do_action('mainwp_pagefooter_sites');
}
}I’ve written this up so that next time I am working on an extension (Which is now), I will remember how to do this and what I need to do to render it how I want to. A big thanks go to MainWP support and techs. Their willingness to embrace the improvement and modification of MainWP is really commendable.
I have a few more minor tidy-ups to make to the code from testing, and a new version of MainWP-Client-Notes-For-Pro-Report will hopefully be pushed this evening GMT, so you can all benefit from this.
