Skip to main content الرئيسية المنشئون beko2210 firstbrain wordpress-theme-development
wordpress-theme-development WordPress theme development workflow covering theme architecture, template hierarchy, custom post types, block editor support, responsive design, and WordPress 7.0 features: DataViews, Pattern Editing, Navigation Overlays, and admin refresh.
الانتقال إلى التثبيت سوق المهارات اكتشف واستكشف مهارات الذكاء الاصطناعي التي بناها المجتمع.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
عرض تفاصيل Prompt يتجاوز الأمر المباشر Prompt المخصّص للمراجعة. افحص المصدر قبل تشغيله.
npx skills add https://github.com/BEKO2210/Firstbrain --skill wordpress-theme-developmentيبقى الأمر في سطر واحد. مرّر أفقيًا لمراجعته كاملًا قبل النسخ.
تفضّل نسخة محلية؟ نزّل الملفات المتاحة حاليًا لدى SkillsMP.
تحميل Zip جاري التحميل... المهن ذات الصلة SOC
استنادا إلى تصنيف SOC المهني
name wordpress-theme-development description WordPress theme development workflow covering theme architecture, template hierarchy, custom post types, block editor support, responsive design, and WordPress 7.0 features: DataViews, Pattern Editing, Navigation Overlays, and admin refresh. type skill created 2026-02-27T00:00:00.000Z domain design-creative category ui-ux risk safe source personal tags ["skill","design-creative","ui-ux","wordpress","theme"]
WordPress Theme Development Workflow
Overview
Specialized workflow for creating custom WordPress themes from scratch, including modern block editor (Gutenberg) support, template hierarchy, responsive design, and WordPress 7.0 enhancements.
WordPress 7.0 Theme Features
Admin Refresh
New default color scheme
View transitions between admin screens
Modern typography and spacing
Pattern Editing
ContentOnly mode defaults for unsynced patterns
disableContentOnlyForUnsyncedPatterns settingPer-block instance custom CSS
Navigation Overlays
Customizable navigation overlays
Improved mobile navigation
New Blocks
Icon block
Breadcrumbs block with filters
Responsive grid block
Theme.json Enhancements
Pseudo-element support
Block-defined feature selectors honored
Enhanced custom CSS
Iframed Editor
Block API v3+ enables iframed post editor
Full enforcement in 7.1, opt-in in 7.0
When to Use This Workflow
Use this workflow when:
Creating custom WordPress themes
Converting designs to WordPress themes
Adding block editor support
Implementing custom post types
Building child themes
Implementing WordPress 7.0 design features
Workflow Phases
Phase 1: Theme Setup
Skills to Invoke
app-builder - Project scaffoldingfrontend-developer - Frontend development
Actions
Create theme directory structure
Set up style.css with theme header
Create functions.php
Configure theme support
Set up enqueue scripts/styles
WordPress 7.0 Theme Header
Copy-Paste Prompts Use @app-builder to scaffold a new WordPress theme project
Phase 2: Template Hierarchy
Skills to Invoke
frontend-developer - Template development
Actions
Create index.php (fallback template)
Implement header.php and footer.php
Create single.php for posts
Create page.php for pages
Add archive.php for archives
Implement search.php and 404.php
WordPress 7.0 Template Considerations
Test with iframed editor
Verify view transitions work
Check new admin color scheme compatibility
Copy-Paste Prompts Use @frontend-developer to create WordPress template files
Phase 3: Theme Functions
Skills to Invoke
backend-dev-guidelines - Backend patterns
Actions
Register navigation menus
Add theme support (thumbnails, RSS, etc.)
Register widget areas
Create custom template tags
Implement helper functions
WordPress 7.0 theme.json Configuration {
"$schema" : "https://schemas.wp.org/trunk/theme.json" ,
"version" : 3 ,
"settings" : {
"appearanceTools" : true ,
"layout" : {
"contentSize" : "1200px" ,
"wideSize" : "1400px"
} ,
"background" : {
"backgroundImage" : true } ,
"typography" : {
"fontFamilies" : true ,
"fontSizes" : true } ,
"spacing" : {
"margin" : true ,
"padding" : true } ,
"blocks" : {
"core/heading" : {
"typography" : {
"fontSizes" : [ "24px" , "32px" , "48px" ]
}
}
}
} ,
"styles" : {
"color" : {
"background" : "#ffffff" ,
"text" : "#1a1a1a"
} ,
"elements" : {
"link" : {
"color" : {
"text" : "#0066cc"
}
}
}
} ,
"customTemplates" : [
{
"name" : "page-home" ,
"title" : "Homepage" ,
"postTypes" : [ "page" ]
}
] ,
"templateParts" : [
{
"name" : "header" ,
"title" : "Header" ,
"area" : "header"
}
]
}
Copy-Paste Prompts Use @backend-dev-guidelines to create theme functions
Phase 4: Custom Post Types
Skills to Invoke
wordpress-penetration-testing - WordPress patterns
Actions
Register custom post types
Create custom taxonomies
Add custom meta boxes
Implement custom fields
Create archive templates
RTC-Compatible CPT Registration register_post_type ('portfolio' , [
'labels' => [
'name' => __ ('Portfolio' , 'my-theme' ),
'singular_name' => __ ('Portfolio Item' , 'my-theme' )
],
'public' => true ,
'has_archive' => true ,
'show_in_rest' => true , // Enable for RTC
'supports' => ['title' , 'editor' , 'thumbnail' , 'excerpt' , 'custom-fields' ],
'menu_icon' => 'dashicons-portfolio' ,
]);
register_post_meta ('portfolio' , 'client_name' , [
'type' => 'string' ,
'single' => true ,
'show_in_rest' => true ,
'sanitize_callback' => 'sanitize_text_field' ,
]);
Copy-Paste Prompts Use @wordpress-penetration-testing to understand WordPress CPT patterns
Phase 5: Block Editor Support
Skills to Invoke
frontend-developer - Block development
Actions
Enable block editor support
Register custom blocks
Create block styles
Add block patterns
Configure block templates
WordPress 7.0 Block Features
Block API v3 is reference model
PHP-only block registration
Per-instance custom CSS
Block visibility controls (viewport-based)
Block Pattern with ContentOnly (WP 7.0) {
"name" : "my-theme/hero-section" ,
"title" : "Hero Section" ,
"contentOnly" : true ,
"content" : [
{
"name" : "core/cover" ,
"attributes" : {
"url" : "{{hero_image}}" ,
"overlay" : "black" ,
"dimRatio" : 50
} ,
"innerBlocks" : [
{
"name" : "core/heading" ,
"attributes" : {
"level" : 1 ,
"textAlign" : "center" ,
"content" : "{{hero_title}}"
}
} ,
{
"name" : "core/paragraph" ,
"attributes" : {
"align" : "center" ,
"content" : "{{hero_description}}"
}
}
]
}
]
}
Navigation Overlay Template Part
?>
<nav class ="header -navigation -overlay " aria -label ="<?php esc_attr_e ('Overlay Menu ', 'my -theme '); ?>">
<button class ="overlay -close " aria -label ="<?php esc_attr_e ('Close menu ', 'my -theme '); ?>">
<span class ="close -icon " aria -hidden ="true ">
<svg width ="24" height ="24" viewBox ="0 0 24 24" fill ="none " stroke ="currentColor " stroke -width ="2">
<line x1 ="18" y1 ="6" x2 ="6" y2 ="18"></line >
<line x1 ="6" y1 ="6" x2 ="18" y2 ="18"></line >
</svg >
</span >
</button >
<?php
wp_nav_menu ([
'theme_location ' => 'primary ',
'container ' => false ,
'menu_class ' => 'overlay -menu ',
'fallback_cb ' => false ,
]);
?>
</nav >
Copy-Paste Prompts Use @frontend-developer to create custom Gutenberg blocks
Phase 6: Styling and Design
Skills to Invoke
frontend-design - UI designtailwind-patterns - Tailwind CSS
Actions
Implement responsive design
Add CSS framework or custom styles
Create design system
Implement theme customizer
Add accessibility features
WordPress 7.0 Admin Refresh Considerations
@media (prefers-color-scheme : dark) {
:root {
--admin-color : modern;
}
}
.wp-admin {
view-transition-name : none;
}
body {
view-transition-name : page;
}
CSS Custom Properties (WP 7.0) :root {
--wp-dataviews-color-background : #ffffff ;
--wp-dataviews-color-border : #e0e0e0 ;
--wp-overlay-menu-background : #1a1a1a ;
--wp-overlay-menu-text : #ffffff ;
}
Copy-Paste Prompts Use @frontend-design to create responsive theme design
Phase 7: WordPress 7.0 Features Integration
Breadcrumbs Block Support
add_filter ('wp_breadcrumb_args' , function($args ) {
$args ['separator' ] = '<span class="breadcrumb-separator"> / </span>' ;
$args ['before' ] = '<nav class="breadcrumb" aria-label="Breadcrumb">' ;
$args ['after' ] = '</nav>' ;
return $args ;
});
add_action ('breadcrumb_items' , function($trail , $crumbs ) {
if (is_singular ('portfolio' )) {
$portfolio_page = get_page_by_path ('portfolio' );
if ($portfolio_page ) {
array_splice ($trail ->crumbs, 1 , 0 , [
[
'title' => get_the_title ($portfolio_page ),
'url' => get_permalink ($portfolio_page )
]
]);
}
}
}, 10 , 2 );
Icon Block Support
add_action ('init' , function() {
register_block_pattern_category ('my-theme/icons' , [
'label' => __ ('Theme Icons' , 'my-theme' ),
'description' => __ ('Custom icons for use in the Icon block' , 'my-theme' ),
]);
});
add_action ('init' , function() {
register_block_pattern ('my-theme/custom-icons' , [
'title' => __ ('Custom Icon Set' , 'my-theme' ),
'categories' => ['my-theme/icons' ],
'content' => '<!-- Pattern content with Icon blocks -->'
]);
});
Phase 8: Testing
Skills to Invoke
playwright-skill - Browser testingwebapp-testing - Web app testing
Actions
Test across browsers
Verify responsive breakpoints
Test block editor
Check accessibility
Performance testing
WordPress 7.0 Testing Checklist
Copy-Paste Prompts Use @playwright-skill to test WordPress theme
Theme Structure theme-name/
├── style.css
├── functions.php
├── index.php
├── header.php
├── footer.php
├── sidebar.php
├── single.php
├── page.php
├── archive.php
├── search.php
├── 404.php
├── comments.php
├── template-parts/
│ ├── header/
│ ├── footer/
│ ├── navigation/
│ └── content/
├── patterns/ # Block patterns (WP 7.0)
├── templates/ # Site editor templates
├── inc/
│ ├── class-theme.php
│ └── supports.php
├── assets/
│ ├── css/
│ ├── js/
│ └── images/
└── languages/
WordPress 7.0 Theme Checklist
Quality Gates
Related Workflow Bundles
wordpress - WordPress developmentwordpress-plugin-development - Plugin developmentwordpress-woocommerce - WooCommerce
Connections
Domain: [[Design & Kreativitaet]]Kategorie: [[UI & UX Design]]Navigation: [[Skills Uebersicht]], [[Home]] 