ttsunsolar-pro; language files go in languages/rtl.css for right-to-left languagessrcsetFont Awesome 6: header/footer contact icons and social shortcodes use FA6 classes such as fa-solid fa-phone and fa-brands fa-facebook-f. Use the same format in Customizer social shortcodes and CPT icon meta fields.
Go to Appearance > Theme Demo to import / re-import demo content or reset theme options to defaults.
Open Appearance > Customize. The left panel holds theme controls; the right side shows a live preview of the front end. Opening a section (header, homepage section, contact page, etc.) focuses the preview on that area.
Main panels:
The front page uses the hero slider plus up to 11 dynamic homepage sections. Set Settings > Reading to show a static front page (or keep the blog index with the theme front template).
Frontend header with top bar (phone, email, address, social) and main navbar.
Social icons are set under Customize > Theme General > Header Top Bar using the shortcode format:
[social_area]
[social icon="fa-brands fa-facebook-f" link="#" label="Facebook"]
[social icon="fa-brands fa-twitter" link="#" label="Twitter"]
[social icon="fa-brands fa-linkedin-in" link="#" label="LinkedIn"]
[social icon="fa-brands fa-instagram" link="#" label="Instagram"]
[/social_area]Use Font Awesome 6 classes (fa-solid … / fa-brands …). The same shortcode format is used for footer social icons under Customize > Footer Settings.
Manage slides and timing under Customize > Homepage Slider.
Assign the primary menu under Appearance > Menus. Demo menu uses real page links (About, Services, Projects, Contact).
Sample inner pages:
Footer columns use Appearance > Widgets (Footer 1–4) when widgets are assigned; otherwise Customizer footer content is used.
Go to Customize > Theme Colors > Brand & Chrome Colors. Color bunches update primary, header, navigation, links, and footer colors. The right-side preview shows changes live after refresh.
Header Top Bar colors:
Footer colors:
Under Customize > Global Typography, set font size and font family bunches for body and navigation. Each homepage section also has its own color / size / family controls inside Homepage Sections.
Theme General > Header & Logo and Header Top Bar control logo, site title, tagline, phone, email, address, social shortcode, and related colors/fonts. Opening these sections focuses the preview on the header.
Configure transition effect, animation speed, pause time, navigation, and up to 6 slide images under Homepage Slider.
Footer Colors and Footer Content & Links control column titles, about text, contact details, social shortcode, copyright, and “Theme by ThemeStulip” credit text/URL.
Under Pages & Blog configure Contact Us map/styles, inner page layouts, blog/single layouts, taxonomy layouts, and inner banners. Opening a section loads the matching page in the preview.
Drag sections under Homepage Sections > Section Sorting. Each Section N panel controls title, IDs, background, hide toggle, shortcode content, colors, and typography. Opening a section panel scrolls the preview to that homepage block.
Frontend:
Content from Solar Services CPT. Featured image 800 × 560 px. Shortcode: [section_heading context="services"][solar_services]
Customizer — Section Colors (Appearance > Customize > Homepage Sections > this section):
Post type list:
Edit post / add content:
Frontend:
Manage counters from Statistics. Set icon + number in meta (no featured image). Shortcode: [section_heading context="stats" light="true"][solar_stats]
Customizer — Section Colors (Appearance > Customize > Homepage Sections > this section):
Post type list:
Edit post / add content:
Frontend:
Features from Why Choose Features. Side image recommended 720 × 900 px. Shortcode: [solar_whychoose]
Customizer — Section Colors (Appearance > Customize > Homepage Sections > this section):
Post type list:
Edit post / add content:
Frontend:
Avatar featured image 200 × 200 px. Shortcode: [section_heading context="testimonials" light="true"][solar_testimonials show="3"]
Customizer — Section Colors (Appearance > Customize > Homepage Sections > this section):
Post type list:
Edit post / add content:
Frontend:
Featured image 800 × 600 px. Shortcode: [section_heading context="gallery"][solar_gallery filter="true" show="8"]
Customizer — Section Colors (Appearance > Customize > Homepage Sections > this section):
Post type list:
Edit post / add content:
Frontend:
Featured image 800 × 500 px. Shortcode: [section_heading context="blog"][solar_blog show="3"]
Customizer — Section Colors (Appearance > Customize > Homepage Sections > this section):
Post type list:
Edit post / add content:
Frontend:
Solar Dynamic Content group process. Image 600 × 400 px. Shortcode: [section_heading context="process"][solar_process]
Customizer — Section Colors (Appearance > Customize > Homepage Sections > this section):
Post type list:
Edit post / add content:
Frontend:
Solar Dynamic Content group financing. Shortcode: [section_heading context="financing"][solar_financing]
Customizer — Section Colors (Appearance > Customize > Homepage Sections > this section):
Frontend:
Solar Dynamic Content group compare. Shortcode: [section_heading context="compare"][solar_price_compare]
Customizer — Section Colors (Appearance > Customize > Homepage Sections > this section):
Frontend:
Calculator shortcode section. Shortcode: [section_heading context="savings"][solar_savings_calculator]
Customizer — Section Colors (Appearance > Customize > Homepage Sections > this section):
Frontend:
Dedicated Contact page uses the Contact template. Shortcode: [solar_consultation]
Customizer — Section Colors (Appearance > Customize > Homepage Sections > this section):
| Post Type | Admin Menu | Homepage Section |
|---|---|---|
| Solar Services | Solar Services | Services |
| Statistics | Statistics | Statistics |
| Why Choose Features | Why Choose Features | Why Choose / About |
| Testimonials | Testimonials | Testimonials |
| Project Gallery | Project Gallery | Gallery / Projects |
| Solar Dynamic Content | Solar Dynamic Content | Process, Financing, Compare |
| Posts | Posts | Blog |
left-sidebar.phpno-sidebar.phpfull-width.phptemplate-contact.phpLayouts and banners can also be controlled globally from Customize > Pages & Blog.
Use Appearance > Widgets for the main sidebar and Footer Widget 1–4. When a footer widget area is active, it replaces that column’s Customizer fallback content.
Each homepage section uses a shortcode that matches the section name. Set them under Customize > Homepage Sections > Section N > Section Shortcode Content.
| Section | Shortcode Content |
|---|---|
| 1 Services | [section_heading context="services"][solar_services] |
| 2 Statistics | [section_heading context="stats" light="true"][solar_stats] |
| 3 Why Choose | [solar_whychoose] |
| 4 Testimonials | [section_heading context="testimonials" light="true"][solar_testimonials show="3"] |
| 5 Gallery | [section_heading context="gallery"][solar_gallery filter="true" show="8"] |
| 6 Blog | [section_heading context="blog"][solar_blog show="3"] |
| 7 Process | [section_heading context="process"][solar_process] |
| 8 Financing | [section_heading context="financing"][solar_financing] |
| 9 Price Compare | [section_heading context="compare"][solar_price_compare] |
| 10 Savings | [section_heading context="savings"][solar_savings_calculator] |
| 11 Consultation | [solar_consultation] |
Legacy aliases still work: [resources], [counter_skill], [why_choose_us], [tulip-testimonials], [photogallery], [recent-posts].
Open each post type from the left admin menu, click Add New (or edit an existing item). Enter the title and content, fill meta fields, and set a Featured Image using the sizes below.
Solar Services — Featured Image 800 × 560 px
Statistics — no featured image; set a Font Awesome 6 icon class (example: fa-solid fa-bolt), counter number, and suffix in the meta box.
Why Choose Features — set a Font Awesome 6 icon in meta (example: fa-solid fa-leaf); side image is set in Customizer section options (recommended 720 × 900 px).
Testimonials — Featured Image (avatar) 200 × 200 px; set Position/role in meta.
Project Gallery — Featured Image 800 × 600 px; assign gallery categories for filters.
Solar Dynamic Content — Featured Image 600 × 400 px; set group to process, financing, or compare.
Blog Posts — Featured Image 800 × 500 px
| Content | Recommended Image Size |
|---|---|
| Homepage Slider | 1920 × 900 px |
| Inner Page Banner | 1920 × 500 px |
| Solar Services | 800 × 560 px |
| Testimonials avatar | 200 × 200 px |
| Project Gallery | 800 × 600 px |
| Blog featured | 800 × 500 px |
| Solar Dynamic Content | 600 × 400 px |
| Why Choose side image | 720 × 900 px |
| Logo | 240 × 80 px |
The theme is fully responsive. On phones the top bar stacks, the menu becomes a slide-out drawer, and homepage sections switch to a single-column layout.
Homepage (mobile):
Mobile menu:
Services page (mobile):
Contact page (mobile):
