Simple Web Development tips & spiritual observations
Mainly I created the shortcode to show 4 post as per the design above, One in left and Three in right based on the request of one of my client. He wanted to show 4 post in such manner in Elementor page builder plugins. You have to use [recent_posts] in Elementor shortcode module to show it.
The code is divided in 2 part. One for Functions.php and other for Style.css
Code for function.php
This is for advanced users, just shared the code. You can use it in your site by changing the Pin Location name and address. Applicable for wordpress, html and php based sites. Feel free to do comments if you have any question regarding this.
Just paste the following Code in your theme’s function.php
In the following Code, I have created Instruction post type with Weeks taxonomy (category) for one of my client. He requested me to show his workout plan based on Week and Day basis. So Just change the Name of Post type and taxonomy and save it.
function instruction_post_type_register(){
register_post_type('instructions',array(
'label'=> 'Instructions',
'public' =>true
));
register_taxonomy('weeks','instructions',array(
'labels'=> array(
'name'=>'Weeks',
'add_new_item'=>'Add New Week',
'parent_item'=> 'Parent Week'
),
'hierarchical'=>true
));
}
add_action('init','instruction_post_type_register');Feel free to do comments if you need any sort of helps.
Please read until the end of the post.
In short, here are the issues we generally face in our Laptop or PC
The main requirement was, to show sidebar in static homepage in twentyseventeen theme with comments form. Check the screenshot
Solution
I have created a template,named Home Sidebar for twentyseventeen theme . I am sharing the template with you
Put this template in your twentyseventeen theme folder and use it to create page with sidebar and comments form.
Here I am sharing you the latest theme Varia and the child themes created using this theme. I have shared the css codes which is applicable for all the child themes of Varia.
YOGA BASED INSTITUTION CHILD THEME BALASANA
ONLINE BUSINESS CHILD THEME SHAWBURN
EDUCATIONAL INSTITUTIONS BASED CHILD THEME STRATFORD
ORGANIZATION OR PERSONAL BASED CHILD THEME ALVES
ENTREPRENEURS AND SMALL BUSINESS OWNERS BASED CHILD THEME REDHILL
AGRICULTURE BUSINESS BASED CHILD THEME BARNSBURY
IMPRESSIVE PORTFOLIO OR PROJECT BASED CHILD THEME DALSTON
The CSS IS APPLICABLE FOR ALL CHILD THEME OF VARIA THEME. CHILD THEMES ARE SHARED AT THE BOTTOM OF THE POST
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
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;
}
All About Basic 