Perfect 👍 Let’s upgrade the minimal theme with all the “nice-to-have” Astra-like enhancements so it feels more professional, flexible, and future-proof.
I’ll keep code minimal, clean, and ready to drop into your theme folder.
✅ Enhanced Theme Structure
Your folder will now look like this:
my-astra-lite/
│── style.css
│── functions.php
│── header.php
│── footer.php
│── index.php
│── single.php
│── page.php
│── sidebar.php
│── screenshot.png
│── /assets
│ ├── js/navigation.js
│ └── css/block-editor-styles.css
│── /template-parts
│ └── content.php
1. style.css
(same header, add editor styles hint)
/*
Theme Name: My Astra Lite
Theme URI: https://example.com/my-astra-lite
Author: You
Author URI: https://example.com
Description: A minimal Astra-like theme with modern enhancements.
Version: 1.1
License: GPL-2.0-or-later
Text Domain: my-astra-lite
*/
/* frontend styles (same as before) */
/* --- Editor tweaks (block editor will import block-editor-styles.css) --- */
2. functions.php
(updated to include editor styles, proper JS enqueue, and template parts)
<?php
// Theme setup
function my_astra_lite_setup() {
add_theme_support('title-tag');
add_theme_support('post-thumbnails');
add_theme_support('custom-logo', array(
'height' => 60,
'width' => 200,
'flex-height' => true,
'flex-width' => true,
));
add_theme_support('html5', array('search-form','comment-form','comment-list','gallery','caption'));
add_theme_support('responsive-embeds');
// Gutenberg block editor support
add_theme_support('editor-styles');
add_editor_style('assets/css/block-editor-styles.css');
register_nav_menus(array(
'primary' => __('Primary Menu', 'my-astra-lite'),
));
}
add_action('after_setup_theme', 'my_astra_lite_setup');
// Enqueue assets
function my_astra_lite_scripts() {
wp_enqueue_style('my-astra-lite-style', get_stylesheet_uri(), array(), wp_get_theme()->get('Version'));
wp_enqueue_script('my-astra-lite-nav', get_template_directory_uri().'/assets/js/navigation.js', array(), '1.0', true);
}
add_action('wp_enqueue_scripts', 'my_astra_lite_scripts');
// Sidebar
function my_astra_lite_widgets_init() {
register_sidebar(array(
'name' => __('Sidebar', 'my-astra-lite'),
'id' => 'sidebar-1',
'before_widget' => '<section id="%1$s" class="widget %2$s">',
'after_widget' => '</section>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
));
}
add_action('widgets_init','my_astra_lite_widgets_init');
3. header.php
(no major change, just streamlined)
<!doctype html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<?php wp_body_open(); ?>
<a class="skip-link" href="#content">Skip to content</a>
<header class="site-header">
<div class="wrap">
<div class="site-branding">
<?php if (has_custom_logo()) {
the_custom_logo();
} else { ?>
<a class="site-title" href="<?php echo esc_url(home_url('/')); ?>"><?php bloginfo('name'); ?></a>
<p class="site-description"><?php bloginfo('description'); ?></p>
<?php } ?>
</div>
<button class="menu-toggle" aria-expanded="false" aria-controls="primary-menu">Menu</button>
<nav class="main-nav" role="navigation">
<?php
wp_nav_menu(array(
'theme_location'=>'primary',
'container'=>false,
'menu_class'=>'main-menu',
'fallback_cb'=>'__return_false'
));
?>
</nav>
</div>
</header>
<main id="content" class="wrap">
4. footer.php
(same, but credits improved)
</main>
<footer class="site-footer">
<div class="wrap">
<div class="site-info">
© <?php echo date('Y'); ?> <?php bloginfo('name'); ?> |
<?php _e('Powered by WordPress', 'my-astra-lite'); ?>
</div>
</div>
</footer>
<?php wp_footer(); ?>
</body>
</html>
5. template-parts/content.php
(cleaner article markup shared by index.php, single.php, etc.)
<article id="post-<?php the_ID(); ?>" <?php post_class('post'); ?>>
<header class="entry-header">
<?php
if ( is_singular() ) {
the_title('<h1 class="entry-title">','</h1>');
} else {
the_title('<h2 class="entry-title"><a href="'.esc_url(get_permalink()).'">','</a></h2>');
}
?>
<div class="entry-meta">
<time datetime="<?php echo esc_attr(get_the_date('c')); ?>"><?php echo get_the_date(); ?></time>
• <?php the_author_posts_link(); ?>
</div>
</header>
<div class="entry-content">
<?php
if ( is_singular() ) {
the_content();
} else {
if ( has_post_thumbnail() ) the_post_thumbnail('medium');
the_excerpt();
}
?>
</div>
</article>
6. index.php
(use template part)
<?php get_header(); ?>
<div class="content-area">
<main class="site-main" role="main">
<?php if (have_posts()) : while (have_posts()) : the_post();
get_template_part('template-parts/content');
endwhile;
the_posts_pagination(array(
'mid_size' => 1,
'prev_text' => __('← Prev','my-astra-lite'),
'next_text' => __('Next →','my-astra-lite'),
));
else :
echo '<p>'.__('Nothing found.','my-astra-lite').'</p>';
endif; ?>
</main>
<?php get_sidebar(); ?>
</div>
<?php get_footer(); ?>
7. single.php
<?php get_header(); ?>
<div class="content-area">
<main class="site-main" role="main">
<?php while (have_posts()) : the_post();
get_template_part('template-parts/content');
if ( comments_open() || get_comments_number() ) comments_template();
endwhile; ?>
</main>
<?php get_sidebar(); ?>
</div>
<?php get_footer(); ?>
8. page.php
<?php get_header(); ?>
<div class="content-area">
<main class="site-main" role="main">
<?php while (have_posts()) : the_post();
get_template_part('template-parts/content');
endwhile; ?>
</main>
<?php get_sidebar(); ?>
</div>
<?php get_footer(); ?>
9. /assets/js/navigation.js
(tiny JS for menu toggle)
document.addEventListener('DOMContentLoaded', function(){
const btn = document.querySelector('.menu-toggle');
const nav = document.querySelector('.main-menu');
if(btn && nav){
btn.addEventListener('click', function(){
const expanded = btn.getAttribute('aria-expanded') === 'true';
btn.setAttribute('aria-expanded', !expanded);
nav.style.display = expanded ? 'none' : 'flex';
});
}
});
10. /assets/css/block-editor-styles.css
(make block editor match frontend styles)
body.block-editor-page .editor-styles-wrapper {
font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial;
color: #222;
line-height: 1.6;
padding: 1rem;
max-width: 720px;
margin: auto;
}
.editor-styles-wrapper h1,
.editor-styles-wrapper h2,
.editor-styles-wrapper h3 {
font-weight: 600;
}
.editor-styles-wrapper a { color:#0b74de; }
11. screenshot.png
Make an 880×660 PNG (e.g., just text “My Astra Lite”) so WordPress shows it under Appearance → Themes.
🎯 Final Outcome
-
✅ Lightweight, fast Astra-like structure
-
✅ Template parts for clean code
-
✅ Sidebar & widgets
-
✅ Custom Logo & Site Identity support
-
✅ Gutenberg block editor styling
-
✅ Responsive menu toggle with JS
-
✅ Screenshot preview
👉 Do you want me to package this whole theme into a ZIP (ready to upload & activate), or should I just keep giving the code file-by-file?
No comments:
Post a Comment