Kimberley DurrantEnclose your quotes in the blockquote tag, then apply this css:
blockquote::before {
color: #692100;
content: '“';
font-family: "equity-text";
font-size: 100px;
font-style: normal;
line-height: 0.6;
margin-left: -45px;
margin-top: -5px;
position: absolute;
}
Are you experiencing ugly form fields on the mobile devices which look nothing like the very cool and awesome fields which you built for the desktop version? That could be because its using the browser’s default css for the input and select fields and buttons.
I’ve experienced this on my iphone but it could happen with other mobile operating systems and browsers also.
This bit of code will eliminate that effect.
input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
Use shortcode: [show-product-categories-with-image]
Add the following to your functions.php file.
function showProductCat() {
$cat_args = array(
'orderby' => 'name',
'order' => 'asc',
'hide_empty' => true,
);
$product_categories = get_terms( 'product_cat', $cat_args );
$result = "<div class='product-categories-with-image'>";
if( !empty($product_categories) ){
foreach ($product_categories as $key => $category) {
$thumb_id = get_woocommerce_term_meta( $category->term_id, 'thumbnail_id', true );
$term_img = D0d_get_attachment_image_src( $thumb_id, 'thumbnail', true );
$cat_img = "";
if ($term_img[3]) {
$cat_img = "<img src='". $term_img[0] ."' width='" . $term_img[1] . "' height='" . $term_img[2] . "' />";
}
$result = $result . '<a href="'.get_term_link($category).'" >'
. $cat_img
. $category->name
. '</a><br/>';
}
}
$result = $result . "</div>";
return $result;
}
add_shortcode('show-product-categories-with-image', 'showProductCat');
Here’s a snippet of code to redirect users who land on a specific page of your wordpress site.
You will need the page id. Add it to your functions.php file.
The code below redirect users to my site. 🙂
function redirect_to_another_page() {
$page_id_to_redirect = 119; //enter page id here
$destination = 'https://kimberleydurrant.com'; //enter destination url here
if ( is_page($page_id_to_redirect) ) {
wp_redirect( $destination, 301 );
exit;
}
}
add_action( 'template_redirect', 'redirect_to_another_page' );
Here’s how to deactive a Sidebar or Widgetized Area in WordPress so it won’t show on the website and neither will it show on the Widgets section of the wordpress backend.
First, get the name of the sidebar, you may need to check the theme functions file to get exactly it is.
In this case, we will assume that the sidebar name is ‘sidebar-1’.
Add the code below to your functions file.
function remove_some_widgets(){
// Unregister sidebar
unregister_sidebar( 'sidebar-1' );
}
add_action( 'widgets_init', 'remove_some_widgets', 11 );
Here’s how to embed a page created with Visual Composer onto another page with the page CSS styles included. You can add this code to either the header or footer file of your theme, or another theme file for that matter.
In other words, include a Visual Composer Page as a header, footer or sidebar.
First step: note the id of the page to be embedded. In our example, let’s assume the id of the page to be embedded is 899.
Use this snippet and put the id into the first line of code as indicated below.
$id = 899; //Assumes the page id to be embedded is 899
$p = get_page($id);
//Loads page styles
$shortcodes_custom_css = get_post_meta( $id, '_wpb_shortcodes_custom_css', true );
if ( ! empty( $shortcodes_custom_css ) ) {
echo '<style type="text/css" data-type="vc_shortcodes-custom-css-'.$id.'">';
echo $shortcodes_custom_css;
echo '</style>';
}
//Loads page content
echo apply_filters('the_content', $p->post_content);
First step: upload the .otf to the server so its accessible by the css file.
Add this bit of code to the top of your css file to activate a new font using its .otf file.
In this case, the .otf file was placed in the fonts folder on the same level as the css file.
@font-face {
font-family: 'Arial';
src: url('./Arial.eot');
src: local('Arial'), url('./Arial.woff') format('woff'), url('./Arial.ttf') format('truetype');
}
Here’s how to use that newly added font. The font name below must be exactly the same as the defined “font-family” name above.
body {
font-family: 'Arial';
}
Add the following code to your functions.php file to load or enqueue the most recent child theme style.css file or any css/javascript file.
function my_custom_files() {
//use the current date and time as the file version
$cache_buster = date("YmdHi");
wp_register_style( 'childstyle', get_stylesheet_directory_uri() . '/style.css', $cache_buster, 'all' );
wp_enqueue_script( 'my-scripts', get_stylesheet_directory_uri() . '/scripts.js', array(), $cache_buster, true );
wp_enqueue_style( 'childstyle' );
}
add_action( 'wp_enqueue_scripts', 'my_custom_files', 11);
Add this bit of code to ensure smooth transitions of elements:
* {
-webkit-transition: all 700ms;
transition: all 700ms;
}
This will apply to all elements and for all types of transitions; whether its related to the element’s height, width, positioning or font size.
It is especially useful for mobile responsive when the element size has to be made smaller to fit the device. By using this smooth transition, the change looks smooth and nice to the end user.
You’ve got your woocommerce site up and running but there’s this really annoying thing happening when users click on the product image. The image opens in the same window, navigating away from the product page.
Here’s a quick fix using jquery. If you’re not familiar with child themes, download the Custom CSS/JS plugin and drop this into a javascript file!
jQuery(document).ready(function( $ ){
if ( $(".woocommerce-product-gallery__image").length ) { //make sure the link element exists on the page
$( ".woocommerce-product-gallery__image a" ).click(function( event ) {
event.preventDefault(); //cancel the onclick action
});
}
});