Bootstrap 5 theme creation
August 30, 2025 · AI Conversations
Name will be openeratech
also add nice simple look and feel for full website
I will submit this theme to wordpress marketplace later
# with Bootstrap 5 styling (via CDN by default) and clean, minimal design.
# It then zips the theme so the user can download and install it.
import os, textwrap, json, zipfile, io
from PIL import Image, ImageDraw, ImageFont
base = "/mnt/data/openeratech"
os.makedirs(base, exist_ok=True)
def write(path, content):
full = os.path.join(base, path)
os.makedirs(os.path.dirname(full), exist_ok=True)
with open(full, "w", encoding="utf-8") as f:
f.write(content)
# 1) style.css (theme header)
style_css = textwrap.dedent("""
/*
Theme Name: Openeratech
Theme URI: https://example.com/openeratech
Author: Neeraj Tiwari
Author URI: https://example.com
Description: A clean, classic WordPress theme using Bootstrap 5 with a simple, elegant look and full template coverage. Ideal starter for blogs and small business sites.
Tags: blog, one-column, two-columns, custom-logo, custom-menu, footer-widgets, translation-ready, bootstrap
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: openeratech
*/
""").strip() + "n"
write("style.css", style_css)
# 2) readme.txt
readme_txt = textwrap.dedent("""
=== Openeratech ===
Contributors: neerajtiwari
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Tags: blog, one-column, two-columns, custom-logo, custom-menu, footer-widgets, translation-ready, bootstrap
Openeratech is a clean, classic WordPress theme using Bootstrap 5. It includes all key template files, accessibility features, and a minimalist visual style suitable for blogs or small business sites.
== Installation ==
1. Upload the `openeratech` folder to `/wp-content/themes/` or upload the zip in Appearance → Themes → Add New.
2. Activate the theme.
3. Assign menus in Appearance → Menus (Primary and Footer).
4. (Optional) Set a static Front Page under Settings → Reading.
== Notes for WordPress.org submission ==
– WordPress.org requires NO remote assets. This theme uses Bootstrap via CDN by default for convenience.
– Before submitting, switch to local vendor assets by setting `OPENERATECH_USE_CDN` to `false` in `functions.php` and place Bootstrap files in `assets/vendor/bootstrap/` (see comments in `functions.php`). Include Bootstrap license.
– Ensure your screenshot.png accurately represents the theme.
– Run Theme Check and fix any warnings specific to your setup.
== Changelog ==
= 1.0.0 =
* Initial release.
""").strip() + "n"
write("readme.txt", readme_txt)
# 3) theme.json (for a consistent minimalist palette/typography)
theme_json = {
"version": 2,
"settings": {
"color": {
"palette": [
{"slug": "primary", "name": "Primary", "color": "#0d6efd"},
{"slug": "secondary", "name": "Secondary", "color": "#6c757d"},
{"slug": "light", "name": "Light", "color": "#f8f9fa"},
{"slug": "dark", "name": "Dark", "color": "#212529"},
{"slug": "body", "name": "Body", "color": "#343a40"}
]
},
"typography": {
"fontFamilies": [
{"slug": "system-ui", "name": "System UI", "fontFamily": "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif"}
],
"fontSizes": [
{"slug": "small", "size": "0.875rem", "name": "Small"},
{"slug": "normal", "size": "1rem", "name": "Normal"},
{"slug": "large", "size": "1.25rem", "name": "Large"},
{"slug": "xl", "size": "1.75rem", "name": "XL"}
]
},
"layout": {
"contentSize": "720px",
"wideSize": "1200px"
}
},
"styles": {
"color": {
"text": "#343a40",
"background": "#ffffff"
},
"typography": {
"fontFamily": "var(–wp–preset–font-family–system-ui)",
"lineHeight": "1.6"
}
}
}
write("theme.json", json.dumps(theme_json, indent=2))
# 4) assets/css/theme.css
theme_css = textwrap.dedent("""
/* Openeratech custom tweaks */
body { background-color: #fff; }
a { text-decoration: none; }
a:hover { text-decoration: underline; }
.site-header { border-bottom: 1px solid #e9ecef; }
.site-footer { background: #f8f9fa; border-top: 1px solid #e9ecef; }
.hero { padding: 6rem 0; background: linear-gradient(180deg, #f8f9fa, #ffffff); }
.card-img-top { object-fit: cover; height: 200px; }
.wp-caption { max-width: 100%; }
.alignwide { max-width: 1200px; margin-left: auto; margin-right: auto; }
.alignfull { width: 100vw; margin-left: calc(50% – 50vw); margin-right: calc(50% – 50vw); }
.screen-reader-text { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.navbar .current-menu-item > a { font-weight: 600; }
.sidebar .widget { margin-bottom: 2rem; }
.pagination { justify-content: center; }
""").strip() + "n"
write("assets/css/theme.css", theme_css)
# 5) assets/js/theme.js
theme_js = textwrap.dedent("""
// Openeratech JS (you can add enhancements here)
(function() {
// Example: Add a CSS class when scrolled
var last = 0;
var header = document.querySelector('.site-header');
if (!header) return;
window.addEventListener('scroll', function() {
var y = window.pageYOffset || document.documentElement.scrollTop;
if (y > 16 && last
Name will be openeratech
also add nice simple look and feel for full website
I will submit this theme to wordpress marketplace later
# with Bootstrap 5 styling, then zips it for easy download.
import os, textwrap, zipfile, io, json
base = "/mnt/data/openeratech"
dirs = [
base,
f"{base}/assets",
f"{base}/assets/css",
f"{base}/assets/js",
f"{base}/assets/img",
f"{base}/inc",
f"{base}/template-parts",
f"{base}/languages",
]
for d in dirs:
os.makedirs(d, exist_ok=True)
# ———- style.css ———-
style_css = textwrap.dedent("""
/*
Theme Name: OpeneraTech
Theme URI: https://example.com/openeratech
Author: OpeneraTech
Author URI: https://example.com
Description: A clean, classic WordPress theme with Bootstrap 5. Simple, fast, and ready for the WordPress.org Theme Directory.
Version: 1.0.0
Tested up to: 6.6
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: openeratech
Tags: blog, one-column, two-columns, right-sidebar, custom-background, custom-logo, custom-menu, featured-images, footer-widgets, translation-ready, rtl-language-support
*/
/* Root palette (safe, simple) */
:root{
–ot-primary:#0d6efd;
–ot-dark:#0b1320;
–ot-body:#121212;
–ot-muted:#6c757d;
–ot-bg:#ffffff;
–ot-soft:#f6f7fb;
}
/* Basic resets */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
color:#212529;
background:var(–ot-bg);
line-height:1.6;
}
a{color:var(–ot-primary);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto}
/* Header */
header.site-header .navbar{
border-bottom:1px solid #e9ecef;
background:#fff;
}
.brand-logo img{height:40px;width:auto}
/* Hero (front page) */
.ot-hero{
padding:72px 0;
background:linear-gradient(180deg,#f8f9fc 0%, #ffffff 100%);
}
.ot-hero h1{font-weight:800;letter-spacing:-.5px}
.ot-hero .lead{font-size:1.15rem;color:#495057}
/* Cards */
.card{border-radius:1rem}
/* Footer */
.site-footer{
background:#0f1115;
color:#cbd1da;
padding:40px 0 20px;
}
.site-footer a{color:#cbd1da}
.site-footer .footer-bottom{border-top:1px solid rgba(255,255,255,.08);margin-top:20px;padding-top:12px;font-size:.9rem;color:#9aa3af}
/* Widgets */
.widget{margin-bottom:24px}
.widget-title{font-size:1.05rem;font-weight:700;margin-bottom:.75rem}
/* Post meta */
.post-meta{color:var(–ot-muted);font-size:.9rem}
/* Pagination */
.pagination .page-numbers{display:inline-block;padding:.5rem .75rem;border:1px solid #dee2e6;border-radius:.5rem;margin:0 .15rem;color:#495057}
.pagination .current{background:var(–ot-primary);border-color:var(–ot-primary);color:#fff}
/* Accessibility helpers */
.screen-reader-text{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.screen-reader-text:focus{position:static;width:auto;height:auto}
""").strip()
# ———- functions.php ———-
functions_php = textwrap.dedent("""
**Download:** [openeratech.zip](sandbox:/mnt/data/openeratech.zip)
### What’s inside
– Templates: `front-page.php`, `home.php`, `index.php`, `single.php`, `page.php`, `archive.php`, `search.php`, `404.php`, `comments.php`, `sidebar.php`
– Partials: `header.php`, `footer.php`, `searchform.php`, `template-parts/content*.php`
– Core: `style.css` (proper header), `functions.php`, `theme.json`
– Inc: `inc/setup.php`, `inc/assets.php`, `inc/walkers.php` (Bootstrap 5 nav walker), `inc/template-tags.php`
– Assets: `assets/css/theme.css`, `assets/js/theme.js`, `assets/vendor/bootstrap/README.txt`
– i18n: `languages/openeratech.pot`
– `screenshot.png` and `readme.txt`
### Quick start
1. Upload the zip in **Appearance → Themes → Add New → Upload Theme**.
2. Activate **Openeratech**.
3. Set up menus in **Appearance → Menus** (Primary & Footer).
4. (Optional) Set a static front page in **Settings → Reading**.
5. Add a few widgets to **Footer Widgets** (3-column responsive area).
### Nice touches included
– **Bootstrap 5** (CDN by default), minimal custom CSS, clean cards & spacing
– **Custom Logo**, **Featured Images**, **Title Tag**, **HTML5**, **align-wide** support
– **Accessible** skip link, search form labels, and semantic structure
– **Pagination**, tag badges, footer nav, and ready-made hero on the front page
– **Simple Bootstrap nav walker** for dropdowns
### Submitting to WordPress.org later
WordPress.org disallows remote assets. This theme uses CDN **only for convenience** while you build.
Before submission:
1. Open `inc/assets.php` and set:
define('OPENERATECH_USE_CDN', false);
2. Place local Bootstrap files as:
assets/vendor/bootstrap/css/bootstrap.min.css
assets/vendor/bootstrap/js/bootstrap.bundle.min.js
(Keep Bootstrap’s license file in the theme.)
3. Ensure your **screenshot.png** reflects the real look (1200×900 is included).
4. Run **Theme Check** and fix any environment-specific warnings.
If you want, I can also:
– Bundle local Bootstrap files for you in a new zip.
– Add page templates (Full Width, Landing) or a lightweight Customizer panel.
– Switch to a no-jQuery flow (already Bootstrap 5 friendly).
Want me to tweak colors/typography or add a full-width template next?
[Download the theme (openeratech.zip)](sandbox:/mnt/data/openeratech.zip)
### What’s inside
– Core files: `style.css`, `functions.php`, `header.php`, `footer.php`, `index.php`
– Templates: `front-page.php`, `home.php`, `single.php`, `page.php`, `archive.php`, `search.php`, `404.php`, `comments.php`, `sidebar.php`
– Partials: `template-parts/content*.php`
– Nav Walker: `inc/class-openeratech-bootstrap-navwalker.php` (Bootstrap 5 dropdowns)
– Customizer: `inc/customizer.php` (hero title, subtitle, CTA text + URL)
– Assets: `assets/js/theme.js`, `assets/css/editor.css`
– Screenshot: `screenshot.png` (1200×900)
– Readme with install/dev notes
### Quick start
1. Install the ZIP via **Appearance → Themes → Add New → Upload**.
2. Create a **menu** and assign it to **Primary Menu** (and Footer if you want).
3. (Optional) Set **Settings → Reading** to a **static Front Page** and a **Posts page**.
4. Tweak hero text under **Appearance → Customize → Front Page Hero**.
### Note for WordPress.org submission
Right now Bootstrap is loaded from the CDN for convenience. Before submitting to the marketplace, bundle Bootstrap locally (the repo reviewers don’t allow remote assets):
– Put compiled files here, for example:
– `assets/vendor/bootstrap/css/bootstrap.min.css`
– `assets/vendor/bootstrap/js/bootstrap.bundle.min.js`
– Update the enqueues in `functions.php` to point to those local files (remove the CDN lines).
If you want, I can flip the enqueues to local and add the files structure ready for you to drop in the compiled Bootstrap files.
– `languages/openeratech.pot` (template)
– `languages/openeratech-en_US.po` (baseline)
– `languages/openeratech-hi_IN.po` (Hindi example)
[Download the updated theme (openeratech.zip)](sandbox:/mnt/data/openeratech.zip)
Tip for submission: keep your text domain as `openeratech` (already done), and load it via `load_theme_textdomain( 'openeratech', get_template_directory() . '/languages' );` which is already in `functions.php`. If you want other locales, duplicate the `.po` file and rename it, e.g. `openeratech-de_DE.po`, then compile to `.mo` with Poedit.