Wordpress settings menu not displaying correctly - php

Question

I've create a settings menu with tabs and some content. I get no PHP errors but when I load the page my settings are looking like this:
So as you can see my content is outside of the tab in the left corner. I'm absolutely not sure whats wrong here. This is my code:
Here I register the new menu page:
add_action( 'admin_menu', 'register_settings_submenu' );
function register_settings_submenu() {
add_submenu_page( 'options-general.php', 'Additional Settings', 'Additional Settings', 'manage_options', 'settings-submenu', 'settings_page' );
}
This is the regarding function for the add_action above:
function settings_page() {
global $settings_active_tab;
$settings_active_tab = isset( $_GET['tab'] ) ? $_GET['tab'] : 'general'; ?>
<h2 class="nav-tab-wrapper">
<?php
do_action( 'payments_tab' )
?>
</h2>
<?php
do_action( 'payments_content' );
}
This is the function for the tab:
add_action( 'payments_tab', 'payments_tab', 1 );
function payments_tab() {
global $settings_active_tab; ?>
<a class="nav-tab <?php echo $settings_active_tab === 'payments' || '' ? 'nav-tab-active' : ''; ?>"
href="<?php echo admin_url( 'admin.php?page=settings-submenu&tab=payments' ); ?>"><?php _e( 'Zahlungen ', 'woocommerce' ); ?> </a>
<?php
}
This is the function for the content:
add_action( 'payments_content', 'payments_content' );
function payments_content() {
global $settings_active_tab;
if ( '' || 'payments' !== $settings_active_tab ) {
return;
} ?>
<div class="wrap">
<h2>Zahlungen</h2>
<form method="post" action="options.php">
<table class="form-table">
<tbody>
<?php
settings_fields( "payments" );
do_settings_sections( "payment-options" );
?>
</tbody>
</table>
<?php submit_button(); ?>
</form>
</div>
<?php }
This function gets the content for this tab and init it:
add_action( "admin_init", "display_settings_pages_content" );
function display_settings_pages_content() {
payment_settings_element();
}
This is the function payment_settings_element:
function payment_settings_element() {
$settings = array(
'field1' => array(
'name' => __( 'Field 1', 'settings' ),
'id' => 'wc_tab_field1',
'type' => 'text',
'desc_tip' => __( 'Im a short desc', 'settings' ),
'desc' => __( '%', 'settings' )
),
'field2' => array(
'name' => __( 'Field 2', 'settings' ),
'id' => 'wc_tab_field2',
'type' => 'text',
'desc_tip' => __( 'Another short desc', 'settings' ),
'desc' => __( '$', 'settings' )
)
);
?>
<?php
foreach ( $settings as $key => $setting ) {
add_settings_field( $key, $setting['name'], createInput( $setting['name'], $setting['id'], $setting['type'], $setting['desc'] ), 'payment-options', 'payments' );
register_setting( 'payments', $key );
} ?>
<?php }
And finally the functions which creates a new settings element:
function createInput( $name, $id, $type, $desc ) {
?>
<tr valign="top">
<th scope="row" class="titledesc">
<label for="<?php echo $id; ?>"><?php echo $name; ?></label>
</th>
<td class="forminp forminp-text">
<input type="<?php echo $type; ?>" name="<?php echo $id; ?>" id="<?php echo $id; ?>"
value="<?php echo get_option( $id ); ?>">
<span class="description"><?php echo $desc; ?></span>
</td>
</tr>
<?php
}
I've absolutely no clue why the inputs are outside of the tab content which has just the table structure but no entries. What do I wrong?

Answer 1

You used the wrong hook here:
add_action( "admin_init", "display_settings_pages_content" );
Try this:
add_action( "payments_content", "display_settings_pages_content" );