Basic integration of tabs UI on theme settings page
This commit is contained in:
Jeremy Rangel
@ -36,17 +36,26 @@ document.addEventListener('DOMContentLoaded', function () {
|
|||||||
const panes = document.querySelectorAll('.tab-pane');
|
const panes = document.querySelectorAll('.tab-pane');
|
||||||
|
|
||||||
tabs.forEach(tab => {
|
tabs.forEach(tab => {
|
||||||
tab.addEventListener('click', function (event) {
|
tab.addEventListener('click', function (event) {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
|
|
||||||
// Remove active class from all tabs and panes
|
// Remove active class from all tabs and panes
|
||||||
tabs.forEach(link => link.classList.remove('active'));
|
tabs.forEach(link => link.classList.remove('active'));
|
||||||
panes.forEach(pane => pane.classList.remove('active'));
|
panes.forEach(pane => pane.classList.remove('active'));
|
||||||
|
|
||||||
// Add active class to the clicked tab and its corresponding pane
|
// Add active class to the clicked tab
|
||||||
tab.classList.add('active');
|
tab.classList.add('active');
|
||||||
const targetPane = document.querySelector(tab.getAttribute('href'));
|
|
||||||
targetPane.classList.add('active');
|
// Get the target pane
|
||||||
});
|
const targetPaneId = tab.dataset.tab;
|
||||||
|
const targetPane = document.getElementById(targetPaneId);
|
||||||
|
|
||||||
|
// Check if targetPane exists before trying to manipulate it
|
||||||
|
if (targetPane) {
|
||||||
|
targetPane.classList.add('active');
|
||||||
|
} else {
|
||||||
|
console.error(`Tab pane with ID '${targetPaneId}' not found.`);
|
||||||
|
}
|
||||||
|
});
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
@ -140,73 +140,6 @@ function save_key_points_meta_box($post_id) {
|
|||||||
}
|
}
|
||||||
add_action('save_post', 'save_key_points_meta_box');
|
add_action('save_post', 'save_key_points_meta_box');
|
||||||
|
|
||||||
/* INSERT ICONS TO DB */
|
|
||||||
// Function to load the JSON file and insert SVG data into the database
|
|
||||||
function load_material_icons_into_db($jsonData) {
|
|
||||||
// Step 2: Decode the JSON data into a PHP array
|
|
||||||
$data = json_decode($jsonData, true);
|
|
||||||
|
|
||||||
// Check if JSON decoding was successful
|
|
||||||
if ($data === null) {
|
|
||||||
die("Error decoding the JSON data.");
|
|
||||||
}
|
|
||||||
|
|
||||||
// Step 3: Create the table if it doesn't exist
|
|
||||||
global $wpdb;
|
|
||||||
$table_name = $wpdb->prefix . 'lcp_icons'; // Table name with WordPress prefix
|
|
||||||
|
|
||||||
// Create the table if it does not exist
|
|
||||||
$sql = "
|
|
||||||
CREATE TABLE IF NOT EXISTS $table_name (
|
|
||||||
id VARCHAR(255) NOT NULL, -- Use the id from the JSON file
|
|
||||||
set_name VARCHAR(255) NOT NULL,
|
|
||||||
set_family VARCHAR(255) NOT NULL,
|
|
||||||
name VARCHAR(255) NOT NULL,
|
|
||||||
paths LONGTEXT NOT NULL,
|
|
||||||
viewbox VARCHAR(255) NOT NULL,
|
|
||||||
PRIMARY KEY (id)
|
|
||||||
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
|
|
||||||
";
|
|
||||||
|
|
||||||
require_once(ABSPATH . 'wp-admin/includes/upgrade.php');
|
|
||||||
dbDelta($sql);
|
|
||||||
|
|
||||||
// Step 4: Insert data into the database
|
|
||||||
foreach ($data as $iconSet) {
|
|
||||||
// Extract values for the set_name and set_family from the top-level object
|
|
||||||
$setName = sanitize_text_field($iconSet['name']);
|
|
||||||
$setFamily = sanitize_text_field($iconSet['family']);
|
|
||||||
|
|
||||||
// Insert each SVG in the 'svgs' array
|
|
||||||
if (isset($iconSet['svgs']) && is_array($iconSet['svgs'])) {
|
|
||||||
foreach ($iconSet['svgs'] as $svg) {
|
|
||||||
$name = sanitize_text_field($svg['name']);
|
|
||||||
|
|
||||||
// Unescape the paths field (HTML entities or Unicode escapes)
|
|
||||||
$paths = html_entity_decode($svg['paths']); // Decode HTML entities (like " or &)
|
|
||||||
$paths = stripslashes($paths); // Remove any additional escaping, such as slashes
|
|
||||||
|
|
||||||
$viewbox = sanitize_text_field($svg['viewBox']);
|
|
||||||
$id = sanitize_text_field($svg['id']); // Use the id from the JSON object
|
|
||||||
|
|
||||||
// Prepare the data for insertion
|
|
||||||
$data = array(
|
|
||||||
'id' => $id, // Use the id from the JSON object
|
|
||||||
'set_name' => $setName,
|
|
||||||
'set_family' => $setFamily,
|
|
||||||
'name' => $name,
|
|
||||||
'paths' => $paths,
|
|
||||||
'viewbox' => $viewbox,
|
|
||||||
);
|
|
||||||
|
|
||||||
// Insert into the database
|
|
||||||
$wpdb->insert($table_name, $data);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
echo '<p>Icons have been imported into the database.</p>';
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// Hook the function to the theme activation process
|
// Hook the function to the theme activation process
|
||||||
|
|||||||
@ -2,61 +2,32 @@
|
|||||||
|
|
||||||
// Create backend pages
|
// Create backend pages
|
||||||
function lcp_backend_pages() {
|
function lcp_backend_pages() {
|
||||||
|
|
||||||
// Separator
|
|
||||||
|
|
||||||
// Theme Settings page
|
// Theme Settings page
|
||||||
add_menu_page(
|
add_menu_page(
|
||||||
'Local Content Pro', // Page title
|
'Local Content Pro', // Page title
|
||||||
'Local Content Pro', // Menu 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
|
'local-content-pro', // Menu slug
|
||||||
'render_lcp_theme_settings_page', // Function to render the page
|
'render_lcp_theme_settings_page', // Function to render the page
|
||||||
'dashicons-admin-generic', // Icon for the menu
|
'dashicons-admin-generic', // Icon for the menu
|
||||||
25 // Position
|
25 // Position
|
||||||
);
|
);
|
||||||
|
|
||||||
// Register the Custom Code settings page
|
// Register the Custom Code settings page
|
||||||
add_menu_page(
|
add_menu_page(
|
||||||
'Custom Code Inserter', // Page title
|
'Custom Code Inserter', // Page title
|
||||||
'Code Inserter', // Menu title
|
'Code Inserter', // Menu title
|
||||||
'manage_options', // Capability required - admin only
|
'manage_options', // Capability required - admin only
|
||||||
'lcp-code-inserter', // Menu slug
|
'lcp-code-inserter', // Menu slug
|
||||||
'custom-code-inserter', // Callback function
|
'custom-code-inserter', // Callback function
|
||||||
'', // Icon
|
'', // Icon
|
||||||
25
|
25
|
||||||
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
add_action( 'admin_menu', 'lcp_backend_pages' );
|
add_action( 'admin_menu', 'lcp_backend_pages' );
|
||||||
// Function to render the theme settings page
|
// Function to render the theme settings page
|
||||||
// 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
|
// Callback to display the custom SVGs field
|
||||||
function lcp_custom_svgs_field() {
|
function lcp_custom_svgs_field() {
|
||||||
@ -170,22 +141,7 @@ function lcp_theme_settings_sanitize($input) {
|
|||||||
return $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">
|
<div class="wrap">
|
||||||
<h1>Theme Settings</h1>
|
<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(); ?>
|
<!-- Tab Structure -->
|
||||||
</form>
|
<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>
|
</div>
|
||||||
|
|
||||||
<?php
|
<?php
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// Hooks
|
// Hooks
|
||||||
|
|
||||||
function highlight_to_share_popup() {
|
function highlight_to_share_popup() {
|
||||||
|
|||||||
Reference in New Issue
Block a user