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

31
assets/js/lcp-ui.js
View File

@ -36,17 +36,26 @@ document.addEventListener('DOMContentLoaded', function () {
const panes = document.querySelectorAll('.tab-pane');
tabs.forEach(tab => {
tab.addEventListener('click', function (event) {
event.preventDefault();
tab.addEventListener('click', function (event) {
event.preventDefault();
// Remove active class from all tabs and panes
tabs.forEach(link => link.classList.remove('active'));
panes.forEach(pane => pane.classList.remove('active'));
// Remove active class from all tabs and panes
tabs.forEach(link => link.classList.remove('active'));
panes.forEach(pane => pane.classList.remove('active'));
// Add active class to the clicked tab and its corresponding pane
tab.classList.add('active');
const targetPane = document.querySelector(tab.getAttribute('href'));
targetPane.classList.add('active');
});
// Add active class to the clicked tab
tab.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.`);
}
});
});
});
});

67
functions.php
View File

@ -140,73 +140,6 @@ function save_key_points_meta_box($post_id) {
}
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

123
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() {