jrangel/local-content-pro
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Basic integration of tabs UI on theme settings page

Browse Source
This commit is contained in:
Jeremy Rangel
2024-12-30 19:41:59 -08:00
parent 4394776735
commit 2df16e37a8
3 changed files with 82 additions and 141 deletions
Download Patch File Download Diff File Expand all files Collapse all files

125
includes/classes/backend.php
View File

@ -2,61 +2,32 @@
// Create backend pages
function lcp_backend_pages() {
// Separator
// Theme Settings page
add_menu_page(
'Local Content Pro', // Page title
'Local Content Pro', // Menu title
'manage_options', // Capability required to access this menu
'manage_options', // Capability required to access this menu
'local-content-pro', // Menu slug
'render_lcp_theme_settings_page', // Function to render the page
'dashicons-admin-generic', // Icon for the menu
25 // Position
'render_lcp_theme_settings_page', // Function to render the page
'dashicons-admin-generic', // Icon for the menu
25 // Position
);
// Register the Custom Code settings page
add_menu_page(
'Custom Code Inserter', // Page title
'Code Inserter', // Menu title
'manage_options', // Capability required - admin only
'lcp-code-inserter', // Menu slug
'custom-code-inserter', // Callback function
'', // Icon
'Code Inserter', // Menu title
'manage_options', // Capability required - admin only
'lcp-code-inserter', // Menu slug
'custom-code-inserter', // Callback function
'', // Icon
25
);
}
add_action( 'admin_menu', 'lcp_backend_pages' );
// Function to render the theme settings page
// Function to render the theme settings page
function lcp_register_custom_svg_settings() {
// Register the settings group and option for custom SVGs
register_setting(
'lcp_theme_settings_group', // Settings group
'lcp_custom_svgs', // Option name
'lcp_custom_svgs_sanitize' // Sanitization function
);
// Add a section to organize the settings
add_settings_section(
'lcp_custom_svgs_section', // Section ID
'Custom SVGs', // Section title
'', // Section callback (optional)
'lcp_theme_settings_page' // Page where to show this section
);
// Add the custom SVGs field
add_settings_field(
'lcp_custom_svgs', // Field ID
'Add Custom SVGs', // Field title
'lcp_custom_svgs_field', // Field callback function
'lcp_theme_settings_page', // Page where this field appears
'lcp_custom_svgs_section' // Section where this field belongs
);
}
add_action('admin_init', 'lcp_register_custom_svg_settings');
// Callback to display the custom SVGs field
function lcp_custom_svgs_field() {
@ -170,22 +141,7 @@ function lcp_theme_settings_sanitize($input) {
return $input;
}
// Inject breakpoints to frontned
function lcp_inject_breakpoints_to_frontend() {
// Get the breakpoints from the settings
$options = get_option('lcp_theme_settings');
$mobile_breakpoint = isset($options['mobile_breakpoint']) ? $options['mobile_breakpoint'] : 768;
$tablet_breakpoint = isset($options['tablet_breakpoint']) ? $options['tablet_breakpoint'] : 1024;
// Inject the CSS variables into the head of the document
echo "<style>
:root {
--mobile-breakpoint: {$mobile_breakpoint}px;
--tablet-breakpoint: {$tablet_breakpoint}px;
}
</style>";
}
add_action('wp_head', 'lcp_inject_breakpoints_to_frontend');
@ -329,22 +285,65 @@ function render_lcp_theme_settings_page() {
?>
<div class="wrap">
<h1>Theme Settings</h1>
<form method="post" action="options.php">
<?php
// Output necessary settings fields for WordPress to save
settings_fields('lcp_theme_settings_group');
do_settings_sections('lcp_theme_settings_page'); // This outputs all the fields defined by add_settings_field
?>
<?php submit_button(); ?>
</form>
<!-- Tab Structure -->
<div class="tab-container">
<!-- Tabs -->
<ul class="tabs">
<li class="tab-link active" data-tab="icons">Icons</li>
<li class="tab-link" data-tab="custom-code">Custom Code</li>
</ul>
<!-- Tab Panes -->
<div id="icons" class="tab-pane active">
<!-- Icons Tab Content -->
<h2>Custom SVG Icons</h2>
<form method="post" action="options.php">
<?php
// Output necessary settings fields for the 'Icons' tab
settings_fields('lcp_theme_settings_group');
do_settings_sections('lcp_theme_settings_page'); // This outputs all the fields defined by add_settings_field
?>
<?php submit_button(); ?>
</form>
</div>
<div id="custom-code" class="tab-pane">
<!-- Custom Code Tab Content -->
<h2>Custom Code Settings</h2>
<form method="post" action="options.php">
<?php
// Output necessary settings fields for the 'Custom Code' tab
settings_fields('custom_code_group');
?>
<table class="form-table">
<tr valign="top">
<th scope="row">CSS </th>
<td><textarea name="custom_code_options[css_header]" rows="10" cols="50"><?php echo esc_textarea( isset( $custom_code['css_header'] ) ? $custom_code['css_header'] : '' ); ?></textarea></td>
</tr>
<tr valign="top">
<th scope="row">JavaScript in Header</th>
<td><textarea name="custom_code_options[js_header]" rows="10" cols="50"><?php echo esc_textarea( isset( $custom_code['js_header'] ) ? $custom_code['js_header'] : '' ); ?></textarea></td>
</tr>
<tr valign="top">
<th scope="row">JavaScript in Footer</th>
<td><textarea name="custom_code_options[js_footer]" rows="10" cols="50"><?php echo esc_textarea( isset( $custom_code['js_footer'] ) ? $custom_code['js_footer'] : '' ); ?></textarea></td>
</tr>
</table>
<?php submit_button(); ?>
</form>
</div>
</div>
</div>
<?php
}
// Hooks
function highlight_to_share_popup() {