Tweaking Newz WordPress Theme
Read Time:4 Minute, 33 Second
- Favorite link on the header could not be disabled. It is taking too much attention on the top right corner of the page. Furthermore, the button is rarely used.
Object : Favourites File : custom-functions.php Code : Non-destructive modification of code. <!--
<div class="theme-navextras-item theme-navextras-bookmark">
<a href="<?php echo esc_url($page_link); ?>">
<span class="theme-navextras-icon"><?php newz_theme_svg('bookmark'); ?></span>
<span class="theme-navextras-label"><?php esc_html_e('Favourites', 'newz'); ?></span>
</a>
</div>
--> - Read it later buttons appears on each and every posts listed. It is rather unsightly as it is excessively repetitive.
Object : File : content.php Code : Comment out the code. <?php //if ( class_exists('Booster_Extension_Class') && $ed_post_read_later ): echo do_shortcode('[be -pp]'); endif; ?> -
SVG inside the close search button is not clear.
Object : File : style.php Code : CSS is coded in a file with a .php extension. body, button:not(.scroll-up, .close-popup), input, select, optgroup, textarea {
color: #404040;
} -
Social share plugin could not be disabled. Not commonly used and taking up real estate. It causes page overflow when viewed on a phone.
Object : File : content-single.php Code : Manually code to switch off the function. $newz_ed_post_social_share = esc_html( get_post_meta( get_the_ID(), 'newz_ed_post_social_share', false) ); - Insufficient gap between the read time and the article below.
Object : Read Time:1 Minute, 29 SecondFile : style.css Code : This is a plugin’s CSS. .single .content-area .booster-read-block {
margin-top: 15px;
margin-bottom: 30px;
} - Add gaps and borders in between posts listed in the main page to increase legibility.
File : style.css Code : Standardizing looks by using format found in the original .css file. .article-wraper .theme-article-area:not(:last-of-type) .news-article,
#theme-block-4 #primary .theme-article-area:not(:last-child) .news-article {
margin-bottom: 2rem;
padding-bottom: 2rem;
border-bottom: 1px solid #e5e5e5;
} - Modifying appearance of Popular / Latest post in the main page when viewed on a mobile device.
File : style.css Code : Quick fix for devices with less than 767px screen size. .column-3.column-order-3 .news-article {
display: flex;
flex-wrap: wrap;
}
.column-xs-12.column-order-3 .news-article .entry-meta {
flex: 1 100%;
}
.column-xs-12.column-order-3 .news-article .data-bg-small {
-ms-flex-negative: 0;
flex-shrink: 0;
-ms-flex-item-align: start;
align-self: flex-start;
width: 120px;
height: 100px;
}
.column-xs-12.column-order-3 .news-article .article-content {
-ms-flex-positive: 1;
padding: 0 1.5rem;
border: none;
flex: 1;
}
.column-xs-12.column-order-3 .news-article .article-content .entry-meta-icon {
margin-left: 0;
}
.column-3.column-order-3 .news-article,
#theme-block-7 .column-4:not(:last-child) .news-article {
margin-bottom: 2rem;
padding-bottom: 2rem;
border-bottom: 1px solid #e5e5e5;
} - Time and date function is not stable. Error occurs whenever window is resized or when there is side to side touches on a mobile.
Object :
Sunday, June 12th, 20227:00:00 AMFile : custom.js Code : Instead of repetitively changing dates in the sub function, take the code out and put it into the main function. jQuery(document).ready(function ($) {
"use strict";
if (!menuContentMain) {
menuContentMain = $('#theme-extrabar').html();
}
if ($(window).width() <= 991) {
//var dateContent = $('.theme-navextras-item').html();
//$('.responsive-content-date').html(dateContent);
$('#theme-extrabar').empty();
} else {
//$('.responsive-content-date').empty();
$('.responsive-content-menu').empty();
if (renderMenu) {
$('#theme-extrabar').html(menuContentMain);
}
}
}jQuery(document).ready(function ($) {
var dateContent = $('.theme-navextras-item').html();
$('.responsive-content-date').html(dateContent);
} - Resizing or re-orienting the screen size causes the ticker to break. It is triggered at 991px. Most tablets nowadays are larger than 992px on landscape mode and less than 992px on portrait mode. Flipping back and forth causes the ticker to stop working.
File : custom.js,
style.cssCode : Ticker hidden to conserve space on a small screen. Taking into account the trend of increasing screen sizes, instead of 992px, the ticker can be hidden at 768px. if ($(window).width() <= 767) {
$('#theme-extrabar').empty();
}@media (max-width: 991px) {
/*
.site .hidden-sm-element {
display: none;
opacity: 0;
visibility: hidden;
}
*/
}@media (max-width: 767px) {
.site .hidden-sm-element {
display: none;
opacity: 0;
visibility: hidden;
}
}
