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 post, I’ll go over the CSS modifications and PHP tweaks I made to achieve the current look and feel of my site.
CSS Customizations
1. General Styles
- Changed the footer background color to
#0e1f47. - Modified the background overlay of the page title section to
rgba(14, 31, 71, 0.8). - Set a custom background image for the page title section.
- Removed the site branding text from the header.
2. Slider / Hero Section
- Adjusted the background color for the slider text and centered it.
- Changed the positioning of the standard slider format for better responsiveness.
3. Testimonial Section
- Disabled the fixed background effect for better readability.
4. Author Box
- Set a fixed width of
190pxfor the author box.
5. Responsive Adjustments
- Adjusted the slider positioning on screens up to 1200px.
- Changed the navigation background color for screens up to 1100px.
- Improved navbar alignment and brand positioning for very small screens (max-width 500px).
6. Blog & Navigation
- Styled the “Read More” link to remove underlining.
- Styled pagination links to use a red border and background color on hover.
7. Portfolio Section
- Limited portfolio images to a height of
300pxand applied object-fit settings for consistent cropping.
This is the finaly css code:
/* ============================= */
/* Allgemeine Stile */
/* ============================= */
/* Hintergrundfarbe der Fußzeile */
.site-footer {
background-color: #0e1f47;
}
/* Seiten-Titel Sektion Hintergrundüberlagerung */
.page-title-section .overlay {
background-color: rgba(14, 31, 71, 0.8) !important;
}
/* Seiten-Titel Sektion Hintergrundbild */
.page-title-section {
background: url(https://blog.gentz.com.de/bloggentz/wp-content/uploads/2024/02/pexels-tyler-lastovich-772803.png)
center/cover no-repeat !important;
}
/* Versteckt den Markennamen / Seitentitel im Header */
.site-branding-text {
display: none;
}
/* ============================= */
/* Slider / Hero Bereich */
/* ============================= */
/* Hintergrundfarbe für Slider-Text */
.slide-text-bg1 {
background-color: rgba(14, 31, 71, 0.8);
text-align: center;
}
/* Positionierung des Standard-Slider-Formats */
.slider .format-standard {
position: absolute;
top: 50%;
left: 20%;
min-width: 85%;
}
/* ============================= */
/* Testimonial Sektion */
/* ============================= */
/* Deaktiviert den fixierten Hintergrundeffekt */
.testimonial-section {
background-attachment: scroll !important;
}
/* ============================= */
/* Autorenbox-Stil */
/* ============================= */
/* Größe der Autorenbox */
.author-box {
width: 190px;
}
/* ============================= */
/* Responsive Anpassungen */
/* ============================= */
/* Anpassung des Sliders für kleinere Bildschirme (bis 1200px) */
@media (max-width: 1200px) {
.slider .format-standard {
position: absolute;
top: 50%;
left: 5%;
min-width: 90%;
}
}
/* Navigation Hintergrundfarbe für kleinere Bildschirme (bis 1100px) */
@media (max-width: 1100px) {
.navbar-custom .navbar-nav {
background-color: #0e1f47;
}
}
/* Anpassungen für sehr kleine Bildschirme (bis 500px) */
@media (max-width: 500px) {
.navbar-header {
display: flex;
align-items: center;
}
.navbar-brand {
margin-right: auto;
}
}
/* ============================= */
/* Blog & Navigation */
/* ============================= */
/* Stil für den "Read More"-Link ohne Unterstreichung */
.home-blog-btn {
text-decoration: none !important;
}
/* Stil für die Pagination-Links */
.navigation.pagination a,
.navigation.pagination a {
border: 1px solid #d42323;
}
.navigation.pagination .nav-links .page-numbers.current,
.navigation.pagination .nav-links a:hover {
background-color: #d42323;
border: 1px solid #d42323;
}
/* ============================= */
/* Portfolio Sektion */
/* ============================= */
/* Bilder in der Portfolio-Sektion auf 300px begrenzen und zuschneiden */
.portfolio-section .post-thumbnail img {
transition: all 300ms ease-out 0s;
width: 100%;
height: 300px;
object-fit: cover;
object-position: center;
opacity: 1;
}
PHP Modifications
1. Footer Copyright Text
I modified the footer.php file to replace the default footer text:
Original:
$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>');
Modified:
$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>';
This ensures the footer contains useful links instead of the default WordPress credits.
2. Post Content Display (content.php)
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.
Original:
spicepress_posted_content(); wp_link_pages();
$spicepress_read_btn=get_theme_mod('spicepress_blog_content','excerpt');
if($spicepress_read_btn=="excerpt"){?>
<p><a href="<?php the_permalink();?>" class="more-link"><?php _e('Read More','spicepress'); ?></a></p>
<?php }
Modified:
$content = get_the_content();
$trimmed_content = mb_strimwidth(strip_tags($content), 0, 350, '...');
echo '<p>' . esc_html($trimmed_content) . '</p>';
wp_link_pages();
if (get_theme_mod('spicepress_blog_content', 'excerpt') === 'excerpt') : ?>
<p><a href="<?php the_permalink(); ?>" class="home-blog-btn"><?php _e('Read More', 'spicepress'); ?></a></p>
<?php endif;
Now, posts display a 350-character preview instead of full content, and the “Read More” button is more visually appealing.
3. Index Page Blog Excerpts (index-news.php)
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.
Original:
<div class="entry-content">
<?php the_content(__('Read More','spicepress')); ?>
</div>
Modified:
<div class="entry-content">
<?php
$content = get_the_content();
$trimmed_content = mb_strimwidth(strip_tags($content), 0, 350, '...');
echo '<p>' . esc_html($trimmed_content) . '</p>';
?>
</div>
After the <div> container, I add the following code to add the red button.
<!-- Blog Button -->
<div class="text-center wow fadeInDown animated" data-wow-duration="500ms" data-wow-delay="0.5s" style="margin-top: 30px;">
<a href="https://blog.gentz.com.de/bloggentz/?page_id=489" class="home-blog-btn">
To the Blog
</a>
</div>
Conclusion
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.
Leave a Reply