Question posted in 
I am converting a html template in wordpress theme, I tried to enqueue the styles and scripts in functions.php but some are working and some are not working my custom css is also not working only bootstrap classes are working
Below is my header.php code:
<?php
/**
* Header file for the Twenty Twenty WordPress default theme.
*
* @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
*
* @package WordPress
* @subpackage Twenty_Twenty
* @since Twenty Twenty 1.0
*/
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after*
these tags -->s
<title> Unistore Pro · Premium Responsive E-Commerce Template</title>
<meta name="description" content="Bootstrap template for you store - E-Commerce Bootstrap Template">
<meta name="keywords" content="unistore, e-commerce bootstrap template, premium e-commerce bootstrap
template, premium bootstrap template, bootstrap template, e-commerce, bootstrap template, sunrise
digital">
<meta name="author" content="Sunrise Digital">
<link rel="shortcut icon" type="image/x-icon" href="favicon.png">
<!-- Bootstrap -->
<link href="assets/css/bootstrap.css" rel="stylesheet">
<link href="assets/css/custom.css" rel="stylesheet">
<link href="assets/css/carousel.css" rel="stylesheet">
<link href="assets/ionicons-2.0.1/css/ionicons.css" rel="stylesheet">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<link href='https://fonts.googleapis.com/css?family=Catamaran:400,100,300' rel='stylesheet'
type='text/css'>
<link href="assets/css/custom-scroll/jquery.mCustomScrollbar.css" rel="stylesheet">
<?php wp_head(); ?>
</head>
Now here is the code of functions.php enqueue code:
function Twenty_twenty_files() {
wp_enqueue_style('twentytwenty_style', get_stylesheet_uri());
}
add_action('wp_enqueue_scripts', 'Twenty_twenty_files');
function Twenty_twenty_scripts() {
wp_enqueue_script('twentytwenty_script', get_theme_file_uri(), array(), '1.0');
wp_enqueue_script( 'twentytwenty-priority-menu', get_theme_file_uri( '/js/custom-
scroll/jquery.mCustomScrollbar.concat.min.js' ), array(), '20181214', true );
wp_enqueue_script( 'twentytwenty-touch-navigation', get_theme_file_uri( '/js/bootstrap.js' ),
array(), '20181231', true );
wp_enqueue_script( 'twentytwenty-priority-menu', get_theme_file_uri( '/js/bootstrap.min.js' ),
array(), '20181214', true );
wp_enqueue_script( 'twentytwenty-priority-menu', get_theme_file_uri( '/js/carousel.js' ),
array(), '20181214', true );
wp_enqueue_script( 'twentytwenty-priority-menu', get_theme_file_uri( '/js/carousel-product.js' ),
array(), '20181214', true );
wp_enqueue_script( 'twentytwenty-priority-menu', get_theme_file_uri( '/js/checkout.js' ),
array(), '20181214', true );
wp_enqueue_script( 'twentytwenty-priority-menu', get_theme_file_uri( '/js/color-calculations.js'
), array(), '20181214', true );
wp_enqueue_script( 'twentytwenty-priority-menu', get_theme_file_uri( '/js/core.js' ), array(),
'20181214', true );
wp_enqueue_script( 'twentytwenty-priority-menu', get_theme_file_uri( '/js/customize.js' ),
array(), '20181214', true );
wp_enqueue_script( 'twentytwenty-priority-menu', get_theme_file_uri( '/js/customize-controls.js'
), array(), '20181214', true );
wp_enqueue_script( 'twentytwenty-priority-menu', get_theme_file_uri( '/js/customize-preview.js'
), array(), '20181214', true );
wp_enqueue_script( 'twentytwenty-priority-menu', get_theme_file_uri( '/js/editor-script-block.js'
), array(), '20181214', true );
wp_enqueue_script( 'twentytwenty-priority-menu', get_theme_file_uri( '/js/index.js' ), array(),
'20181214', true );
wp_enqueue_script( 'twentytwenty-priority-menu', get_theme_file_uri(
'/js/jquery.touchSwipe.min.js' ), array(), '20181214', true );
wp_enqueue_script( 'twentytwenty-priority-menu', get_theme_file_uri( '/js/jquery.ui.touch-
punch.js' ), array(), '20181214', true );
wp_enqueue_script( 'twentytwenty-priority-menu', get_theme_file_uri( '/js/jquery-latest.min.js'
), array(), '20181214', true );
wp_enqueue_script( 'twentytwenty-priority-menu', get_theme_file_uri( '/js/jquery-ui-1.11.4.js' ),
array(), '20181214', true );
wp_enqueue_script( 'twentytwenty-priority-menu', get_theme_file_uri( '/js/masonry.pkgd.min.js' ),
array(), '20181214', true );
wp_enqueue_script( 'twentytwenty-priority-menu', get_theme_file_uri( '/js/npm.js' ), array(),
'20181214', true );
wp_enqueue_script( 'twentytwenty-priority-menu', get_theme_file_uri( '/js/skip-link-focus-fix.js'
), array(), '20181214', true );
wp_enqueue_script( 'twentytwenty-priority-menu', get_theme_file_uri( '/js/store.js' ), array(),
'20181214', true );
}
add_action( 'wp_enqueue_scripts', 'Twenty_twenty_scripts' );
2
Answers
You can add style and script like below code, And you need add unique for all style and script for id please check attached image where you can change id.
wp_enqueue_style(‘slick’, get_stylesheet_directory_uri() . ‘/assets/css/slick.css’;
wp_enqueue_script(‘general’, get_stylesheet_directory_uri() . ‘/assets/js/general.js’;
Make sure you give unique handle to all
wp_enqueue_scriptandwp_enqueue_style. the first parameter is the handle. you can also remove js based on the handle usingwp_dequeue_script. try below code.