After a recent theme update, I lost all my customizations. To avoid this happening again and to document the changes properly, I decided to write everything down for myself and for you.<\/p>\n\n\n\n
SpicePress is a great WordPress theme, but I wanted to make some customizations to better fit my blog’s design and functionality. In this post, I’ll go over the CSS modifications and PHP tweaks I made to achieve the current look and feel of my site.<\/p>\n\n\n\n
#0e1f47<\/code>.<\/li>\n\n\n\n- Modified the background overlay of the page title section to
rgba(14, 31, 71, 0.8)<\/code>.<\/li>\n\n\n\n- Set a custom background image for the page title section.<\/li>\n\n\n\n
- Removed the site branding text from the header.<\/li>\n<\/ul>\n\n\n\n
2. Slider \/ Hero Section<\/h3>\n\n\n\n\n- Adjusted the background color for the slider text and centered it.<\/li>\n\n\n\n
- Changed the positioning of the standard slider format for better responsiveness.<\/li>\n<\/ul>\n\n\n\n
3. Testimonial Section<\/h3>\n\n\n\n\n- Disabled the fixed background effect for better readability.<\/li>\n<\/ul>\n\n\n\n
4. Author Box<\/h3>\n\n\n\n\n- Set a fixed width of
190px<\/code> for the author box.<\/li>\n<\/ul>\n\n\n\n5. Responsive Adjustments<\/h3>\n\n\n\n\n- Adjusted the slider positioning on screens up to 1200px.<\/li>\n\n\n\n
- Changed the navigation background color for screens up to 1100px.<\/li>\n\n\n\n
- Improved navbar alignment and brand positioning for very small screens (max-width 500px).<\/li>\n<\/ul>\n\n\n\n
6. Blog & Navigation<\/h3>\n\n\n\n\n- Styled the “Read More” link to remove underlining.<\/li>\n\n\n\n
- Styled pagination links to use a red border and background color on hover.<\/li>\n<\/ul>\n\n\n\n
7. Portfolio Section<\/h3>\n\n\n\n\n- Limited portfolio images to a height of
300px<\/code> and applied object-fit settings for consistent cropping.<\/li>\n<\/ul>\n\n\n\nThis is the finaly css code:<\/p>\n\n\n
\n\/* ============================= *\/\n\/* Allgemeine Stile *\/\n\/* ============================= *\/\n\n\/* Hintergrundfarbe der Fu\u00dfzeile *\/\n.site-footer {\n background-color: #0e1f47;\n}\n\n\/* Seiten-Titel Sektion Hintergrund\u00fcberlagerung *\/\n.page-title-section .overlay {\n background-color: rgba(14, 31, 71, 0.8) !important;\n}\n\n\/* Seiten-Titel Sektion Hintergrundbild *\/\n.page-title-section {\n background: url(https:\/\/blog.gentz.com.de\/bloggentz\/wp-content\/uploads\/2024\/02\/pexels-tyler-lastovich-772803.png) \n center\/cover no-repeat !important;\n}\n\n\/* Versteckt den Markennamen \/ Seitentitel im Header *\/\n.site-branding-text {\n display: none;\n}\n\n\/* ============================= *\/\n\/* Slider \/ Hero Bereich *\/\n\/* ============================= *\/\n\n\/* Hintergrundfarbe f\u00fcr Slider-Text *\/\n.slide-text-bg1 {\n background-color: rgba(14, 31, 71, 0.8);\n text-align: center;\n}\n\n\/* Positionierung des Standard-Slider-Formats *\/\n.slider .format-standard { \n position: absolute;\n top: 50%;\n left: 20%;\n min-width: 85%;\n}\n\n\/* ============================= *\/\n\/* Testimonial Sektion *\/\n\/* ============================= *\/\n\n\/* Deaktiviert den fixierten Hintergrundeffekt *\/\n.testimonial-section {\n background-attachment: scroll !important;\n}\n\n\/* ============================= *\/\n\/* Autorenbox-Stil *\/\n\/* ============================= *\/\n\n\/* Gr\u00f6\u00dfe der Autorenbox *\/\n.author-box {\n width: 190px;\n}\n\n\/* ============================= *\/\n\/* Responsive Anpassungen *\/\n\/* ============================= *\/\n\n\/* Anpassung des Sliders f\u00fcr kleinere Bildschirme (bis 1200px) *\/\n@media (max-width: 1200px) {\n .slider .format-standard { \n position: absolute;\n top: 50%;\n left: 5%;\n min-width: 90%;\n }\n}\n\n\/* Navigation Hintergrundfarbe f\u00fcr kleinere Bildschirme (bis 1100px) *\/\n@media (max-width: 1100px) {\n .navbar-custom .navbar-nav {\n background-color: #0e1f47;\n }\n}\n\n\/* Anpassungen f\u00fcr sehr kleine Bildschirme (bis 500px) *\/\n@media (max-width: 500px) {\n .navbar-header {\n display: flex;\n align-items: center;\n }\n\n .navbar-brand {\n margin-right: auto;\n }\n}\n\n\/* ============================= *\/\n\/* Blog & Navigation *\/\n\/* ============================= *\/\n\n\/* Stil f\u00fcr den "Read More"-Link ohne Unterstreichung *\/\n.home-blog-btn {\n text-decoration: none !important;\n}\n\n\/* Stil f\u00fcr die Pagination-Links *\/\n.navigation.pagination a, \n.navigation.pagination a {\n border: 1px solid #d42323;\n}\n\n.navigation.pagination .nav-links .page-numbers.current, \n.navigation.pagination .nav-links a:hover {\n background-color: #d42323;\n border: 1px solid #d42323;\n}\n\n\/* ============================= *\/\n\/* Portfolio Sektion *\/\n\/* ============================= *\/\n\n\/* Bilder in der Portfolio-Sektion auf 300px begrenzen und zuschneiden *\/\n.portfolio-section .post-thumbnail img {\n transition: all 300ms ease-out 0s;\n width: 100%;\n height: 300px;\n object-fit: cover;\n object-position: center;\n opacity: 1;\n}\n<\/pre><\/div>\n\n\nPHP Modifications<\/h2>\n\n\n\n1. Footer Copyright Text<\/h3>\n\n\n\n
I modified the footer.php<\/code> file to replace the default footer text:<\/p>\n\n\n\nOriginal:<\/strong><\/p>\n\n\n\n$spicepress_footer_copyright = get_theme_mod('footer_copyright_text','<p>'.__( 'Proudly powered by <a href="https:\/\/wordpress.org">WordPress<\/a> | Theme: <a href="https:\/\/spicethemes.com" rel="nofollow">SpicePress<\/a> by SpiceThemes', 'spicepress' ).'<\/p>');\n<\/pre><\/div>\n\n\nModified:<\/strong><\/p>\n\n\n\n$spicepress_footer_copyright = '<p><a href="\/?page_id=678">Imprint<\/a> | <a href="\/?page_id=39">Data Protection Declaration<\/a> | <a href="\/bloggentz\/wp-admin">Login<\/a> | <a href="https:\/\/cpl84.hosting24.com:2083\/" target="_blank" rel="noopener noreferrer">cPanel<\/a><\/p><p>Copyright © ' . date('Y') . ' Gentz<\/p>';\n<\/pre><\/div>\n\n\nThis ensures the footer contains useful links instead of the default WordPress credits.<\/p>\n\n\n\n
<\/p>\n\n\n\n
2. Post Content Display (content.php)<\/h3>\n\n\n\n
The default theme displayed post content with an excerpt option. However, the excerpts were too short, and the “Read More” button was not visually appealing. I modified it to limit post previews to 350 characters and replaced the default button with a more stylish red one.<\/p>\n\n\n\n
Original:<\/strong><\/p>\n\n\n\nspicepress_posted_content(); wp_link_pages();\n$spicepress_read_btn=get_theme_mod('spicepress_blog_content','excerpt');\nif($spicepress_read_btn=="excerpt"){?>\n<p><a href="<?php the_permalink();?>" class="more-link"><?php _e('Read More','spicepress'); ?><\/a><\/p>\n<?php }\n<\/pre><\/div>\n\n\nModified:<\/strong><\/p>\n\n\n\n$content = get_the_content();\n$trimmed_content = mb_strimwidth(strip_tags($content), 0, 350, '...');\necho '<p>' . esc_html($trimmed_content) . '<\/p>';\nwp_link_pages();\n\nif (get_theme_mod('spicepress_blog_content', 'excerpt') === 'excerpt') : ?>\n<p><a href="<?php the_permalink(); ?>" class="home-blog-btn"><?php _e('Read More', 'spicepress'); ?><\/a><\/p>\n<?php endif;\n<\/pre><\/div>\n\n\nNow, posts display a 350-character preview instead of full content, and the “Read More” button is more visually appealing.<\/p>\n\n\n\n
<\/p>\n\n\n\n
3. Index Page Blog Excerpts (index-news.php)<\/h3>\n\n\n\n
Initially, the homepage displayed full blog posts, which didn’t look good. I modified it so that only 350 characters are shown, and I added a red button at the bottom linking to the full blog.<\/p>\n\n\n\n
Original:<\/strong><\/p>\n\n\n\n<div class="entry-content">\n<?php the_content(__('Read More','spicepress')); ?>\n<\/div>\n<\/pre><\/div>\n\n\nModified:<\/strong><\/p>\n\n\n\n<div class="entry-content">\n<?php\n$content = get_the_content();\n$trimmed_content = mb_strimwidth(strip_tags($content), 0, 350, '...');\necho '<p>' . esc_html($trimmed_content) . '<\/p>';\n?>\n<\/div>\n<\/pre><\/div>\n\n\nAfter the <div><\/code> container, I add the following code to add the red button.<\/p>\n\n\n\n<!-- Blog Button -->\n <div class="text-center wow fadeInDown animated" data-wow-duration="500ms" data-wow-delay="0.5s" style="margin-top: 30px;">\n <a href="https:\/\/blog.gentz.com.de\/bloggentz\/?page_id=489" class="home-blog-btn">\n To the Blog\n <\/a>\n <\/div>\n<\/pre><\/div>\n\n\n<\/p>\n\n\n\n
Conclusion<\/h2>\n\n\n\n
These changes helped me personalize SpicePress to better suit my blog’s needs. The CSS modifications improved the site’s appearance, while the PHP changes optimized the way content is displayed, making it more user-friendly and structured.<\/p>\n","protected":false},"excerpt":{"rendered":"
After a recent theme update, I lost all my customizations. To avoid this happening again and to document the changes properly, I decided to write everything down for myself and for you. SpicePress is a great WordPress theme, but I wanted to make some customizations to better fit my blog’s design and functionality. In this<\/p><\/div>\n