Wordpress CSS Customization, Web Development, Wordpress Tricks, Job Interview and Recruitment Guide
Stratford is the perfect design for your business or educational institutes online presence. Highlight your products and services, Stratford is versatile enough to be your personal blog too. You can see Stratford theme demo. Stratford theme is a child theme of Varia. So if you want to use this theme in your own hosting (except wordpress.com). Then you need to install Varia as parent theme.
Download Stratford Child theme
Morden is a functional and responsive multi-purpose theme that is the perfect solution for your business’s online presence. You can see Modern theme demo here. It is actually the Child theme of Varia. So, if you want to use it in your hosting, then you need to use Varia theme as Parent theme.
Few days ago one of my client requested me to implement a promo code field ( screenshot attached) in payment form (which i helped him created using contact form 7) to show a discounted price. I helped him implemented this and sharing you the code.
Procedure
[text couponcode placeholder "Promo Code"]
<span class="discountedPrice"> </span>2. Here is the jQuery code ( Use Simple Custom CSS and JS plugins for this)
jQuery(document).ready(function(){
jQuery('input[name="couponcode"]').on('input keyup', function(e){
let couponcode= jQuery( 'input[name="couponcode"]' ).val().trim();
if(couponcode=="ab123"){
jQuery('span.discountedPrice').html("$100");
}
if(couponcode=="BC9287"){
jQuery('span.discountedPrice').html("$499");
}
});
});
Feel free to do ask comments in the comments box if you face any issue.
Suppose you have a paypal button to collect money or sale product and you want your client to submit Contact form 7 form too. To make that work easy for your client it is wise to redirect your client to paypal payment collection after successful submission of the form. Here is the procedure
2. Like the image a new tab “Redirect Settings” will be added
3. Like the Screenshot above you can put the External URL or Paypal url and select “Use External URL”
Instead or redirecting to external url or paypal url if you want to Click Automatically to Paypal Payment button, then use this technique
jQuery(document).ready(function() {
jQuery('button.paypal-button.large').click();
});
please replace this selector button.paypal-button.large with your payment button selector.
If you face issue or need help please do comments in the comments box.
To change Font size, color and font family of BlockQuote in Gutenberg Editor
blockquote.wp-block-quote, blockquote, blockquote p {
font-size: 23px !important;
color: darkred !important;
font-family: cursive !important;
font-style: italic !important;
text-transform: uppercase;
line-height: 27px !important;
}
To change header ( say h5) font size, color, italic style, uppercase and more in Gutenberg Editor
.wp-block-column h5 {
font-size: 20px !important;
color: darkred;
font-family: cursive;
text-transform: uppercase;
text-align: center;
font-style: italic;
border-bottom: 2px solid red;
}
In Single page if you want to change the Page Titl’e font size, color, uppercase , alignment in Gutenberg Editor ( applicable for single post too)
h1.entry-title {
font-size: 27px;
color: darkred !important;
font-family: cursive !important;
font-style: italic !important;
text-transform: uppercase !important;
text-align: center !important;
}
Radiate By ThemeGrill is a clean, creative and minimal personal blogging responsive WordPress theme. The theme has full width slider to highlight some of your unique posts and has featured pages section to tell more about you. Just focus on writing beautiful content and everything else will be handled by this theme in a simple manner.
Recently one of my client ask me to solve the issue which you are seeing in the screenshot. I searched a lot in internet and support forums and found woocommerce has some issue with structured data and I didn’t find any good plugins which can help me solving this.
As woocommerce is generating the structured data, to solve this issue I blocked the “application/ld+json” related code generating by woocommerce. Just do this steps.
4. Go to \includes\class-wc-structured-data.php
5. Block this line (put // just before this line)
echo '<script type="application/ld+json">' . wc_esc_json( wp_json_encode( $data ), true ) . '</script>';
6. Now check again your page / product using this . Issue will not be showing now
https://search.google.com/structured-data/testing-tool
If You Have Any Better Solution Feel Free To Let Me Know In The Comments Section
This Post is for advanced users. So if you are using Contact Form 7 and Contact Form 7 Multi Steps Form and want your form to go to or Redirect Different Form based on Radio button or Drop down or Checkbox selection, then this post can help you.
I have used Jquery and Ajax to solve this issue. If you have any Question, Please ask question in the comments section.
<script>
jQuery(document).ready(function(){
jQuery('input[type="radio"][name="radio-20"]').bind('click',function(){
var ompp= jQuery(this).val();
console.log(ompp);
jQuery.ajax({
url:"<?php echo admin_url('admin-ajax.php');?>",
type:"GET",
contentType: "application/x-www-form-urlencoded;charset=UTF-8",
data:{
action: 'stravyfuncajax23',
radiovalue:ompp
},
success: function(responsea){
jQuery("#bm").html(responsea);
console.log(responsea);
if(responsea=="Build Muscle"){
document.addEventListener( 'wpcf7mailsent', function( event ) {
if ( event.detail.contactFormId === "1719") { location.replace("http://example.com/build-muscle-form-page/");}}, false );
}
else{
document.addEventListener( 'wpcf7mailsent', function( event ) {
if ( event.detail.contactFormId === "1719") { location.replace("http://example.com/lose-weight-form-page/");}}, false );
}
}
});
});
});
</script>in Function.php
add_action('wp_ajax_stravyfuncajax23','searchbyom');
add_action('wp_ajax_nopriv_stravyfuncajax23','searchbyom');
function searchbyom(){
$searchword1= $_GET['radiovalue'] ;
if($searchword1=="Build Muscle"){
echo "Build Muscle";
}else
{
echo "Lose Weight";
}
die();
}The Contact Form 7 Code i used
First Name:
[text your-name]
Last Name:
[text last-name]
What is your goal?
[radio radio-20 default:0 "Lose Weight" "Build Muscle"]
[submit "Continue Questionnaire"][multistep "2-5"]
<div id="bm"></div>
If you want to create a website and want your visitor to view your site in dark mode or in different color, then this example is for you. I am sharing you the zip version of the example. Just download the zip and check the index.html file.
I have created the example with 2 style sheet. One for Light (white) version and another for Darker version. So, when you will visit the site for first time, it will be Light version and then if you click on the button, it will be darker version. Click Here To Download.
Few days ago one of my client ask me helping to increase GTmetrix score. While checking I found Contact Form 7 script is loading in homepage and it is hampering the score. Though the Hompage doesn’t have Contact Form to show. To increase the score, it was wise to load the Contact Form 7 script to load only in Contact Page.
To solve this issue I used this code which helps me the Contact Form 7 script not to load in Homepage, but only in Contact page where the form is used. Just use the code below in your theme’s function.php
