Add Recommended Plugins browser: - Create plugin browser interface - Add category filters - Implement plugin cards with install buttons - Match WordPress plugin installer style
This commit is contained in:
Marcus Quinn
@ -179,3 +179,115 @@
|
|||||||
margin-top: 30px;
|
margin-top: 30px;
|
||||||
padding: 0 10px;
|
padding: 0 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Plugin Browser Styles */
|
||||||
|
.wpa-plugin-filters {
|
||||||
|
margin: 0 0 20px;
|
||||||
|
padding: 0 0 12px;
|
||||||
|
border-bottom: 1px solid #ddd;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wpa-plugin-filters .button {
|
||||||
|
margin: 0 8px 8px 0;
|
||||||
|
padding: 4px 10px;
|
||||||
|
font-size: 13px;
|
||||||
|
line-height: 1.5;
|
||||||
|
min-height: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wpa-plugins-browser {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||||
|
gap: 20px;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.plugin-card {
|
||||||
|
background-color: #fff;
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
border-radius: 4px;
|
||||||
|
box-shadow: 0 1px 4px rgba(0,0,0,0.02);
|
||||||
|
margin: 0;
|
||||||
|
width: 100%;
|
||||||
|
padding: 0;
|
||||||
|
transition: all .15s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.plugin-card:hover {
|
||||||
|
border-color: #4caf50;
|
||||||
|
box-shadow: 0 2px 8px rgba(0,0,0,0.04);
|
||||||
|
}
|
||||||
|
|
||||||
|
.plugin-card-top {
|
||||||
|
padding: 20px;
|
||||||
|
min-height: 150px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.plugin-card .name {
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.plugin-card .name h3 {
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 1.3;
|
||||||
|
margin: 0;
|
||||||
|
color: #1d2327;
|
||||||
|
}
|
||||||
|
|
||||||
|
.plugin-card .plugin-author {
|
||||||
|
font-size: 13px;
|
||||||
|
color: #646970;
|
||||||
|
font-weight: 400;
|
||||||
|
margin-left: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.plugin-card .desc {
|
||||||
|
margin: 8px 0;
|
||||||
|
color: #50575e;
|
||||||
|
}
|
||||||
|
|
||||||
|
.plugin-card .desc p {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 13px;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.plugin-card .action-links {
|
||||||
|
margin-top: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.plugin-action-buttons {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.plugin-action-buttons li {
|
||||||
|
display: inline-block;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.plugin-action-buttons .button {
|
||||||
|
min-height: 30px;
|
||||||
|
line-height: 28px;
|
||||||
|
padding: 0 12px;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.plugin-action-buttons .button-disabled {
|
||||||
|
color: #a7aaad !important;
|
||||||
|
border-color: #ddd !important;
|
||||||
|
background: #f6f7f7 !important;
|
||||||
|
box-shadow: none !important;
|
||||||
|
cursor: default;
|
||||||
|
transform: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Adjust settings content padding for plugin browser */
|
||||||
|
.wpa-settings-content {
|
||||||
|
margin-top: 20px;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
@ -33,9 +33,108 @@ function wpa_superstar_update_option() {
|
|||||||
}
|
}
|
||||||
add_action( 'wp_ajax_wpa_superstar_update_option', 'wpa_superstar_update_option' );
|
add_action( 'wp_ajax_wpa_superstar_update_option', 'wpa_superstar_update_option' );
|
||||||
|
|
||||||
|
// Define recommended plugins
|
||||||
|
function wpa_superstar_get_recommended_plugins() {
|
||||||
|
return array(
|
||||||
|
'utilities' => array(
|
||||||
|
'name' => 'Recommended',
|
||||||
|
'plugins' => array(
|
||||||
|
array(
|
||||||
|
'slug' => 'advanced-custom-fields',
|
||||||
|
'name' => 'Advanced Custom Fields',
|
||||||
|
'description' => 'Customize WordPress with powerful, professional and intuitive fields.',
|
||||||
|
'author' => 'WP Engine',
|
||||||
|
'category' => 'recommended'
|
||||||
|
),
|
||||||
|
array(
|
||||||
|
'slug' => 'admin-menu-editor',
|
||||||
|
'name' => 'Admin Menu Editor',
|
||||||
|
'description' => 'Customize the WordPress admin menu.',
|
||||||
|
'author' => 'Janis Elsts',
|
||||||
|
'category' => 'recommended'
|
||||||
|
),
|
||||||
|
array(
|
||||||
|
'slug' => 'antispam-bee',
|
||||||
|
'name' => 'Antispam Bee',
|
||||||
|
'description' => 'Antispam plugin with a sophisticated toolset for effective spam protection.',
|
||||||
|
'author' => 'pluginkollektiv',
|
||||||
|
'category' => 'recommended'
|
||||||
|
),
|
||||||
|
array(
|
||||||
|
'slug' => 'burst-statistics',
|
||||||
|
'name' => 'Burst Statistics',
|
||||||
|
'description' => 'Privacy-friendly analytics tool.',
|
||||||
|
'author' => 'Really Simple Plugins',
|
||||||
|
'category' => 'recommended'
|
||||||
|
)
|
||||||
|
)
|
||||||
|
),
|
||||||
|
'fluent' => array(
|
||||||
|
'name' => 'Advanced',
|
||||||
|
'plugins' => array(
|
||||||
|
array(
|
||||||
|
'slug' => 'fluent-crm',
|
||||||
|
'name' => 'Fluent CRM',
|
||||||
|
'description' => 'Marketing Automation for WordPress.',
|
||||||
|
'author' => 'WP Fluent',
|
||||||
|
'category' => 'advanced'
|
||||||
|
),
|
||||||
|
array(
|
||||||
|
'slug' => 'fluentform',
|
||||||
|
'name' => 'Fluent Forms',
|
||||||
|
'description' => 'Advanced Contact Form Plugin.',
|
||||||
|
'author' => 'WP Fluent',
|
||||||
|
'category' => 'advanced'
|
||||||
|
),
|
||||||
|
array(
|
||||||
|
'slug' => 'fluent-smtp',
|
||||||
|
'name' => 'Fluent SMTP',
|
||||||
|
'description' => 'The Most Advanced SMTP & Email Service Integration Plugin.',
|
||||||
|
'author' => 'WP Fluent',
|
||||||
|
'category' => 'advanced'
|
||||||
|
),
|
||||||
|
array(
|
||||||
|
'slug' => 'fluent-support',
|
||||||
|
'name' => 'Fluent Support',
|
||||||
|
'description' => 'Customer Support & Helpdesk Plugin.',
|
||||||
|
'author' => 'WP Fluent',
|
||||||
|
'category' => 'advanced'
|
||||||
|
)
|
||||||
|
)
|
||||||
|
),
|
||||||
|
'ecommerce' => array(
|
||||||
|
'name' => 'Ecommerce',
|
||||||
|
'plugins' => array(
|
||||||
|
array(
|
||||||
|
'slug' => 'woocommerce',
|
||||||
|
'name' => 'WooCommerce',
|
||||||
|
'description' => 'An eCommerce toolkit that helps you sell anything.',
|
||||||
|
'author' => 'Automattic',
|
||||||
|
'category' => 'ecommerce'
|
||||||
|
),
|
||||||
|
array(
|
||||||
|
'slug' => 'client-booking',
|
||||||
|
'name' => 'Client Bookings',
|
||||||
|
'description' => 'Appointment Scheduling & Booking.',
|
||||||
|
'author' => 'WP Fluent',
|
||||||
|
'category' => 'ecommerce'
|
||||||
|
)
|
||||||
|
)
|
||||||
|
),
|
||||||
|
'lms' => array(
|
||||||
|
'name' => 'LMS',
|
||||||
|
'plugins' => array(
|
||||||
|
// Add LMS plugins here when needed
|
||||||
|
)
|
||||||
|
)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
// Settings page HTML
|
// Settings page HTML
|
||||||
function wpa_superstar_settings_page() {
|
function wpa_superstar_settings_page() {
|
||||||
$active_tab = isset( $_GET['tab'] ) ? $_GET['tab'] : 'general';
|
$active_tab = isset( $_GET['tab'] ) ? $_GET['tab'] : 'recommended';
|
||||||
|
$active_category = isset( $_GET['category'] ) ? $_GET['category'] : 'recommended';
|
||||||
|
$recommended_plugins = wpa_superstar_get_recommended_plugins();
|
||||||
?>
|
?>
|
||||||
<div class="wrap wpa-superstar-wrap">
|
<div class="wrap wpa-superstar-wrap">
|
||||||
<div class="wpa-superstar-header">
|
<div class="wpa-superstar-header">
|
||||||
@ -51,6 +150,9 @@ function wpa_superstar_settings_page() {
|
|||||||
<div class="wpa-settings-container">
|
<div class="wpa-settings-container">
|
||||||
<div class="wpa-superstar-nav">
|
<div class="wpa-superstar-nav">
|
||||||
<h2 class="nav-tab-wrapper">
|
<h2 class="nav-tab-wrapper">
|
||||||
|
<a href="?page=wpa-superstar&tab=recommended" class="nav-tab <?php echo $active_tab == 'recommended' ? 'nav-tab-active' : ''; ?>">
|
||||||
|
<?php esc_html_e( 'Recommended', 'wpa-superstar' ); ?>
|
||||||
|
</a>
|
||||||
<a href="?page=wpa-superstar&tab=general" class="nav-tab <?php echo $active_tab == 'general' ? 'nav-tab-active' : ''; ?>">
|
<a href="?page=wpa-superstar&tab=general" class="nav-tab <?php echo $active_tab == 'general' ? 'nav-tab-active' : ''; ?>">
|
||||||
<?php esc_html_e( 'General', 'wpa-superstar' ); ?>
|
<?php esc_html_e( 'General', 'wpa-superstar' ); ?>
|
||||||
</a>
|
</a>
|
||||||
@ -61,10 +163,78 @@ function wpa_superstar_settings_page() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="wpa-settings-content">
|
<div class="wpa-settings-content">
|
||||||
<?php settings_fields( 'wpa-superstar-settings' ); ?>
|
<?php if ( $active_tab == 'recommended' ) : ?>
|
||||||
<?php do_settings_sections( 'wpa-superstar-settings' ); ?>
|
<div class="wpa-plugin-filters">
|
||||||
|
<a href="?page=wpa-superstar&tab=recommended&category=recommended"
|
||||||
|
class="button <?php echo $active_category == 'recommended' ? 'button-primary' : ''; ?>">
|
||||||
|
<?php esc_html_e( 'Recommended', 'wpa-superstar' ); ?>
|
||||||
|
</a>
|
||||||
|
<a href="?page=wpa-superstar&tab=recommended&category=advanced"
|
||||||
|
class="button <?php echo $active_category == 'advanced' ? 'button-primary' : ''; ?>">
|
||||||
|
<?php esc_html_e( 'Advanced', 'wpa-superstar' ); ?>
|
||||||
|
</a>
|
||||||
|
<a href="?page=wpa-superstar&tab=recommended&category=ecommerce"
|
||||||
|
class="button <?php echo $active_category == 'ecommerce' ? 'button-primary' : ''; ?>">
|
||||||
|
<?php esc_html_e( 'Ecommerce', 'wpa-superstar' ); ?>
|
||||||
|
</a>
|
||||||
|
<a href="?page=wpa-superstar&tab=recommended&category=lms"
|
||||||
|
class="button <?php echo $active_category == 'lms' ? 'button-primary' : ''; ?>">
|
||||||
|
<?php esc_html_e( 'LMS', 'wpa-superstar' ); ?>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
<?php if ( $active_tab == 'general' ) : ?>
|
<div class="wpa-plugins-browser">
|
||||||
|
<?php foreach ( $recommended_plugins as $section ) :
|
||||||
|
foreach ( $section['plugins'] as $plugin ) :
|
||||||
|
if ( $plugin['category'] === $active_category ) :
|
||||||
|
$installed = is_dir( WP_PLUGIN_DIR . '/' . $plugin['slug'] );
|
||||||
|
$install_url = wp_nonce_url(
|
||||||
|
add_query_arg(
|
||||||
|
array(
|
||||||
|
'action' => 'install-plugin',
|
||||||
|
'plugin' => $plugin['slug']
|
||||||
|
),
|
||||||
|
admin_url( 'update.php' )
|
||||||
|
),
|
||||||
|
'install-plugin_' . $plugin['slug']
|
||||||
|
);
|
||||||
|
?>
|
||||||
|
<div class="plugin-card">
|
||||||
|
<div class="plugin-card-top">
|
||||||
|
<div class="name column-name">
|
||||||
|
<h3>
|
||||||
|
<?php echo esc_html( $plugin['name'] ); ?>
|
||||||
|
<span class="plugin-author">
|
||||||
|
<?php printf( esc_html__( 'By %s', 'wpa-superstar' ), esc_html( $plugin['author'] ) ); ?>
|
||||||
|
</span>
|
||||||
|
</h3>
|
||||||
|
</div>
|
||||||
|
<div class="desc column-description">
|
||||||
|
<p><?php echo esc_html( $plugin['description'] ); ?></p>
|
||||||
|
</div>
|
||||||
|
<div class="action-links">
|
||||||
|
<ul class="plugin-action-buttons">
|
||||||
|
<li>
|
||||||
|
<?php if ( $installed ) : ?>
|
||||||
|
<button class="button button-disabled" disabled><?php esc_html_e( 'Installed', 'wpa-superstar' ); ?></button>
|
||||||
|
<?php else : ?>
|
||||||
|
<a href="<?php echo esc_url( $install_url ); ?>" class="button button-primary">
|
||||||
|
<?php esc_html_e( 'Install Now', 'wpa-superstar' ); ?>
|
||||||
|
</a>
|
||||||
|
<?php endif; ?>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<?php
|
||||||
|
endif;
|
||||||
|
endforeach;
|
||||||
|
endforeach;
|
||||||
|
?>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<?php elseif ( $active_tab == 'general' ) : ?>
|
||||||
<div class="wpa-superstar-toggle">
|
<div class="wpa-superstar-toggle">
|
||||||
<label for="wpa_superstar_lazy_load">
|
<label for="wpa_superstar_lazy_load">
|
||||||
<div class="wpa-toggle-switch">
|
<div class="wpa-toggle-switch">
|
||||||
|
|||||||
Reference in New Issue
Block a user