Category: WordPress

Mailchimp form CSS

/* Mailchimp */
.mc4wp-form-fields:nth-child(2) {
    text-align: center;
}

#mc4wp-form-1 > div.mc4wp-form-fields > p:nth-child(3) {
    text-align: center;
}

#mc4wp-form-1 > div.mc4wp-form-fields input[type="submit"] {
    background: #F8BFC1;
    color: #000;
    border: #000;
}

.mc4wp-form-success .mc4wp-form-fields {
    display: none;
}

Enqueue CSS and JS

function add_theme_scripts() {
  wp_enqueue_style( 'style', get_stylesheet_uri() );
 
  wp_enqueue_style( 'slider', get_template_directory_uri() . '/css/slider.css', array(), '1.1', 'all');
 
  wp_enqueue_script( 'script', get_template_directory_uri() . '/js/script.js', array ( 'jquery' ), 1.1, true);

  wp_enqueue_script( 'fontawesome', 'https://kit.fontawesome.com/4f07b38120.js', array( 'jquery' ), false, false );
 
    if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
      wp_enqueue_script( 'comment-reply' );
    }
}
add_action( 'wp_enqueue_scripts', 'add_theme_scripts' );

For child theme directory

Need to use get_stylesheet_directory_uri()

 wp_enqueue_script( 'spidochetube', get_stylesheet_directory_uri() . '/JS/jquery.spidochetube.min.js', array ( 'jquery' ), 1.1, true);

Register sidebar

function alpha_sidebar(){
  register_sidebar(
      array(
          'name'          => __( 'Single Post Sidebar', 'alpha' ),
          'id'            => 'sidebar-1',
          'description'   => __( 'Right Sidebar', 'alpha' ),
          'before_widget' => '<section id="%1$s" class="widget %2$s">',
          'after_widget'  => '</section>',
          'before_title'  => '<h2 class="widget-title">',
          'after_title'   => '</h2>',
      )
  );
}

add_action("widgets_init","alpha_sidebar");

WordPress style.css header texts

/*
Theme Name: Twenty Twenty
Theme URI: https://wordpress.org/themes/twentytwenty/
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Our default theme for 2020 is designed to take full advantage of the flexibility of the block editor. Organizations and businesses have the ability to create dynamic landing pages with endless layouts using the group and column blocks. The centered content column and fine-tuned typography also makes it perfect for traditional blogs. Complete editor styles give you a good idea of what your content will look like, even before you publish. You can give your site a personal touch by changing the background colors and the accent color in the Customizer. The colors of all elements on your site are automatically calculated based on the colors you pick, ensuring a high, accessible color contrast for your visitors.
Tags: blog, one-column, custom-background, custom-colors, custom-logo, custom-menu, editor-style, featured-images, footer-widgets, full-width-template, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready, block-styles, wide-blocks, accessibility-ready
Version: 1.3
Requires at least: 5.0
Tested up to: 5.4
Requires PHP: 7.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwenty
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

Fix the FTP popup in WordPress

You may encounter a popup for your FTP username and password when installing or updating a plugin in WordPress. Follow these steps to correct the problem:

define('FS_METHOD', 'direct');
define('FS_CHMOD_DIR', (0705 & ~ umask()));
define('FS_CHMOD_FILE', (0604 & ~ umask()));
  • Save your changes and upload the file.
  • Once inserted, you may need to refresh the WordPress Dashboard or clear your browser cache and cookies.

Space animation css

selector {
-webkit-animation: scrolling 3s ease infinite;
   -moz-animation: scrolling 3s ease infinite;
   -o-animation: scrolling 3s  ease infinite;
   animation: scrolling 3s ease infinite;
}

@keyframes scrolling {
  0% {
    transform: translate(0);
  }
 
  50% {
    transform: translate(0,40px);
}

 
  100% {
     transform: translate(0);
  }
}

Upload webp images on WordPress

Add this code to functions.php file

//** *Enable upload for webp image files.*/
function webp_upload_mimes($existing_mimes) {
    $existing_mimes['webp'] = 'image/webp';
    return $existing_mimes;
}
add_filter('mime_types', 'webp_upload_mimes');

If you want to see image (thumbnail) preview when you go Media / Library

//** * Enable preview / thumbnail for webp image files.*/
function webp_is_displayable($result, $path) {
    if ($result === false) {
        $displayable_image_types = array( IMAGETYPE_WEBP );
        $info = @getimagesize( $path );

        if (empty($info)) {
            $result = false;
        } elseif (!in_array($info[2], $displayable_image_types)) {
            $result = false;
        } else {
            $result = true;
        }
    }

    return $result;
}
add_filter('file_is_displayable_image', 'webp_is_displayable', 10, 2);

Create A Child Theme

Create a Theme folder –> create a file called style.css –> fill in the information as outlined below

/*
 Theme Name:     Helocon Child Theme
 Theme URI:      https://helocon.com
 Description:    Helocon Child Theme
 Author:         Helocon Team
 Author URI:     https://helocon.com
 Template:       Helocon
 Version:        1.0.0
*/
 
/* =Theme customization starts here
------------------------------------------------------- */

Enqueue the Parent and Child Theme Stylesheets

Create a file named functions.php and add this code

<?php
function my_theme_enqueue_styles() {
 
    $parent_style = 'parent-style';
 
    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style ),
        wp_get_theme()->get('Version')
    );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
?>

For another example, if you are creating a child theme for the Twentyseventeen theme, you would replace the tag ‘parent-style’ with ‘twentyseventeen-style’ because when you search for the tag being used by the parent theme, you see this:

Each theme will be different so make sure and get this tag name correct.