How to add a button to a sidebar widget?

Question

I am quite new to WordPress and I want to add a custom button to the admin dashboard in the PointFinder theme. I am aware of the action hook concept and already successfully implemented my own action hook with do_action_ref_array() and called it from the functions.php with add_action().

Approach 1 (put button definition statically into php-file)

The target sidebar widget at which I want to add an additional button is built in the 'dashboard-page.php' file. Here's an excerpt of the code:

$pfmenu_output .= ($setup11_reviewsystem_check == 1) ? '<li><a href="'.$setup4_membersettings_dashboard_link.$pfmenu_perout.'ua=reviews"><i class="pfadmicon-glyph-377"></i> '. $setup29_dashboard_contents_rev_page_menuname.'</a></li>' : '';
$pfmenu_output .= '<li><a href="http://my.testsite.com/market"><i class="pfadmicon-glyph-476"></i> '. esc_html__('Car Market','pointfindert2d').'</a></li>';
$pfmenu_output .= '<li><a href="'.esc_url(wp_logout_url( home_url() )).'"><i class="pfadmicon-glyph-476"></i> '. esc_html__('Logout','pointfindert2d').'</a></li>';

The second line is my static approach. The button is added to the sidebar widget correctly. But I need to put this code to the functions.php of my Child-Theme in order to keep it during future update procedures.

Approach 2 (more dynamic with a self defined action-hook)

I also tried to add my own action hook instead of statically adding the button (replaced the second line with an action hook definition:

$pfmenu_output .= ($setup11_reviewsystem_check == 1) ? '<li><a href="'.$setup4_membersettings_dashboard_link.$pfmenu_perout.'ua=reviews"><i class="pfadmicon-glyph-377"></i> '. $setup29_dashboard_contents_rev_page_menuname.'</a></li>' : '';
do_action_ref_array( 'pf_add_widget_button', array(&$pfmenu_output) );
$pfmenu_output .= '<li><a href="'.esc_url(wp_logout_url( home_url() )).'"><i class="pfadmicon-glyph-476"></i> '. esc_html__('Logout','pointfindert2d').'</a></li>';

Afterwards I added an add_action() call to my child-theme's function.php and added the button there, which works also fine:

function swi_add_button_to_widget(&$pfmenu_output) {
    $pfmenu_output .= '<li><a href="http://my.testsite.com/market"><i class="pfadmicon-glyph-476"></i> '. esc_html__('Car Market,'pointfindert2d').'</a></li>';
}
add_action( 'pf_add_widget_button', 'swi_add_button_to_widget' );

Problem Definition

But both approaches described above will only work until I update the PointFinder theme for the first time, since dashboard-page.php will most probably be overriden during the update.

I did not find any pre-made action-hooks implemented by the theme development team by searching through all the files looking for do_action() and do_action_ref_array(). Nothing...

Solution ?

Therefore, is there any other way to get access to this $pfmenu_output variable from within my child-theme in order to add an extra button?

Am I completely stuck when the theme developers did not build-in some pre-made action-hooks for this specific purpose?

Answer 1

Option 1: Copy dashboard-page.php to your child theme

I'm just expanding on Sebastian's comment. You could copy the whole dashboard-page.php file (with your self-added action hook) to your child theme folder. Then, you will have to search for the place in the parent theme where the dashboard-page.php file is included. Hopefully it is included by one of the parent theme's standard template files. Then you simply copy that template file to your child theme to override it. Then you would have to change that line that includes the dashboard-page.php file to include the same file in the child folder instead.

For example, if the page.php template file has something like this:

include (get_template_directory() . '/dashboard-page.php')

You can copy the page.php file to your child theme and change that line to this:

include (get_stylesheet_directory() . '/dashboard-page.php')

Note that get_stylesheet_directory() retrieves the path to the child theme folder and get_template_directory() retrieves the path to the parent theme folder.

Important: It's possible that the the dashboard-page.php file is not included by one of the standard template files that can be overridden, but instead included by other non-standard template files that are included by the parent theme. In that case, you will have to copy every included file down to the dashboard-page.php file. And make sure each include is using the child theme version of each file.

Option 2: Use Javascript/jQuery

One alternative approach would be to use javascript code to insert the button. You could add javascript code to one of your child theme templates to dynamically change the menu after the page loads. I took a look at a demo of the theme and it looks like the list element for the sidebar has a class named "pf-sidebar-menu". You could just add the following code that targets that class and inserts your button after the first list item:

jQuery(".pf-sidebar-menu > li:nth-child(1)").after('<li><a href="http://my.testsite.com/market"><i class="pfadmicon-glyph-476"></i>Car Market</a></li>');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="pf-sidebar-menu">
    <li><a href="#"><i class="pfadmicon-glyph-377"></i>Something</a></li>
    <li><a href="#"><i class="pfadmicon-glyph-476"></i>Logout</a></li>
</ul>

FYI, an easy way to add the above code to your site would be to add the following to your child theme's functions.php file. This creates a script tag at the footer of your site with the above code. You might have to add additional checks to target a specific page or pages.

<?php
function js_add_sidebar_button() {
    ?>
    <script type="text/javascript">
        jQuery(".pf-sidebar-menu > li:nth-child(1)").after('<li><a href="http://my.testsite.com/market"><i class="pfadmicon-glyph-476"></i>Car Market</a></li>');
    </script>
    <?php
}
add_action( 'wp_footer', 'js_add_sidebar_button' );