0

I am working with code in a custom child-theme. My goal is to pull data from the wpdb and display it as a custom table. I have created and populated the custom wpdb table with the relevant data, and I am creating the table. However, in the parent theme header styles files, there is a div:

<div id="inner-wrap" class="wrap hfeed kt-clear">
    <?php
    /**
     * Hook for top of inner wrap.
     */
    do_action( 'kadence_before_content' );
    ?>

that seems to take up a large chunk of the page before my table loads. It always takes up the entire page and forces me to scroll down to see the start of my table. No matter how I zoom in or out, I always need to scroll to even see the start. I have tried assigning my custom table the same ID and Class from that header div, but that has not worked.

The current code to create my table, is located in a custom php file that is used as the template for the page in question. The code looks like this:

<table id = "inner-wrap" class="empTable" border='1'>
<tr>
 <th>Name</th>
 <th>ID</th>
 <th>Active</th>
</tr>
    
<?php
   /*
    Template Name: Custom Table 
   */
get_header();
    global $wpdb;
    $result = $wpdb->get_results ( "SELECT * FROM DBTable" );
    foreach ( $result as $print )   {
        echo '<tr>';
        echo '<td>', $print->name,'</td>';
        echo '<td>', $print->id,'</td>';
        if($print->active == 1){
            echo '<td>', 'Active','</td>';
        }else{
            echo '<td>', 'Inactive','</td>';
        }
        echo '</tr>';
        
    }echo '</table>';

get_footer();

2 Answers 2

0

Part of the problem is that you're running (or re-running) get_header() after your table, thus putting all of the header content into the body of page after the table HTML has started.

<?php
   /*
    Template Name: Custom Table 

    Is this part even needed for you?  If this is a complete template,
then probably, but if it is just a template part, then you're
reproducing something that has already run elsewhere.  You need
to know more about your template/template-part structure.
   */
get_header();
?>


<table id = "inner-wrap" class="empTable" border='1'>
<tr>
 <th>Name</th>
 <th>ID</th>
 <th>Active</th>
</tr>
<?php
    global $wpdb;
    $result = $wpdb->get_results ( "SELECT * FROM DBTable" );
    foreach ( $result as $print )   {
        echo '<tr>';
        echo '<td>', $print->name,'</td>';
        echo '<td>', $print->id,'</td>';
        if($print->active == 1){
            echo '<td>', 'Active','</td>';
        }else{
            echo '<td>', 'Inactive','</td>';
        }
        echo '</tr>';
        
    }echo '</table>';

get_footer();
0

It looks like the issue is that you are using the same id and class attributes for your table as you are using for the #inner-wrap div in the parent theme's header. This means that your table is being styled with the same styles as the #inner-wrap div, which could be causing it to take up a large portion of the page.

To resolve this issue, you can try giving your table a unique id and class attribute. For example:

<table id="custom-table" class="custom-table" border='1'>

You can then add styles for your table using these new id and class attributes in your child theme's style.css file. For example:

#custom-table {
  /* Add your table styles here */
}

.custom-table {
  /* Add your table styles here */
}

This will apply the styles specifically to your custom table, rather than inheriting the styles from the #inner-wrap div in the parent theme's header.

Alternatively, you can try targeting your table directly in the parent theme's header styles file, by using a more specific selector such as #inner-wrap table. This will allow you to override the styles for the #inner-wrap div and apply them specifically to your custom table.

I hope this helps! Let me know if you have any further questions or need additional assistance.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.