HTML TO WORDPRESS CONVERT

THEME DEVELOPMENT

/*
Theme Name: Twenty Twenty-Three

Theme URI: https://wordpress.org/themes/twentytwentythree

Author: the WordPress team

Author URI: https://wordpress.org

Description: Twenty Twenty-Three is designed to take advantage of the new design tools introduced in WordPress 6.1. With a clean, blank base as a starting point, this default theme includes ten diverse

Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations, accessibility-ready, blog, portfolio, news
*/

style.css / screenshot.png(1200*900) / index.php / header.php / footer.php / functions.php / template_home.php / template_about.php /

FOR PAGES CALL

<?php
/*Template name:templateevent*/

get_header();
?>

<!!!!!—here is your html ——!!!!!!>

<?php
get_footer();
?>

<!!__ EXAMPLE — template_home.php /
template_about.php / !!>>

Proper way to enqueue scripts and styles

<?php

/**
 * Proper way to enqueue scripts and styles
 */
function load_stylesheet() {
wp_enqueue_style(‘style’,get_template_directory_uri().’/style.css’,array() ,1, ‘all’);
wp_enqueue_style(‘Style’);

}
add_action( ‘wp_enqueue_scripts’, ‘load_stylesheet’ );

?>

CSS CALL DIRECT

<?php echo get_template_directory_uri(); ?>

 

 <link rel=”stylesheet” href=”<?php echo get_template_directory_uri(); ?>/style.css”>

THEME DEVELOPMENT

/*
Theme Name: Twenty Twenty-Three

Theme URI: https://wordpress.org/themes/twentytwentythree

Author: the WordPress team

Author URI: https://wordpress.org

Description: Twenty Twenty-Three is designed to take advantage of the new design tools introduced in WordPress 6.1. With a clean, blank base as a starting point, this default theme includes ten diverse

Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations, accessibility-ready, blog, portfolio, news
*/

Add Custom post type

<?php

function gallery_post_type() {
$labels = array(
‘name’ => _x( ‘gallery’, ‘Post Type General Name’, ‘acsweb’ ),
‘singular_name’ => _x( ‘gallery’, ‘Post Type Singular Name’, ‘acsweb’ ),
‘menu_name’ => __( ‘gallery’, ‘acsweb’ ),
‘parent_item_colon’ => __( ‘Parent gallery’, ‘acsweb’ ),
‘all_items’ => __( ‘All gallery’, ‘acsweb’ ),
‘view_item’ => __( ‘View gallery’, ‘acsweb’ ),
‘add_new_item’ => __( ‘Add New gallery’, ‘acsweb’ ),
‘add_new’ => __( ‘Add New’, ‘acsweb’ ),
‘edit_item’ => __( ‘Edit gallery’, ‘acsweb’ ),
‘update_item’ => __( ‘Update gallery’, ‘acsweb’ ),
‘search_items’ => __( ‘Search gallery’, ‘acsweb’ ),
‘not_found’ => __( ‘Not Found’, ‘acsweb’ ),
‘not_found_in_trash’ => __( ‘Not found in Trash’, ‘acsweb’ ),
);
$args = array(
‘label’ => __( ‘gallery’, ‘acsweb’ ),
‘description’ => __( ‘gallery news and reviews’, ‘acsweb’ ),
‘labels’ => $labels,
‘supports’ => array( ‘title’, ‘editor’, ‘excerpt’, ‘author’, ‘thumbnail’, ),
‘taxonomies’ => array( ‘genres’ ),
‘hierarchical’ => false,
‘public’ => true,
‘show_ui’ => true,
‘show_in_menu’ => true,
‘show_in_nav_menus’ => true,
‘show_in_admin_bar’ => true,

‘menu_position’ => 5,
‘menu_icon’ => ‘dashicons-format-image’,
‘can_export’ => true,
‘has_archive’ => true,
‘exclude_from_search’ => false,
‘publicly_queryable’ => true,
‘capability_type’ => ‘page’,
‘taxonomies’ => array( ‘category’ ),
);
register_post_type( ‘gallery’, $args );
}
add_action( ‘init’, ‘gallery_post_type’, 0 );

 


?>

Create Child theme

/**
* Theme Name: deeemo
* Template: portfolio
* …other header fields
*/

mega menu

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Document</title>
<link rel=”stylesheet” href=”r.css”>
</head>
<body>
<div class=”mega-menu-container”>
<nav class=”mega-menu”>
<ul>
<li>
<a class=”menu-title” href=”#”>HOME</a>
</li>

<li class=”has-submenu”>
<a class=”menu-title” href=”#”>PRODUCTS</a>
<div class=”submenu-container”>
<div class=”submenu”>
<h3>
Experience the Best Quality Products at Unbeatable Prices –
Shop Now!
</h3>
<div class=”col-3″>
<div class=”submenu-column”>
<h4>Laptop</h4>
<img src=”images/laptop.jpg” alt=”” />
<ul>
<li>
<a href=”#”>Dell XPS 13</a>
</li>
<li>
<a href=”#”>Apple MacBook Air</a>
</li>
<li>
<a href=”#”>ASUS ZenBook UX425</a>
</li>
</ul>
</div>

<div class=”submenu-column”>
<h4>CAMERA</h4>
<img src=”images/camera.jpg” alt=”” />
<ul>
<li>
<a href=”#”>Dell XPS 13</a>
</li>
<li>
<a href=”#”>Apple MacBook Air</a>
</li>
<li>
<a href=”#”>ASUS ZenBook UX425</a>
</li>
</ul>
</div>

<div class=”submenu-column”>
<h4>Audio Equipments</h4>
<img src=”images/audio.jpg” alt=”” />
<ul>
<li>
<a href=”#”>Dell XPS 13</a>
</li>
<li>
<a href=”#”>Apple MacBook Air</a>
</li>
<li>
<a href=”#”>ASUS ZenBook UX425</a>
</li>
</ul>
</div>
</div>

</div>
</li>

<li class=”has-submenu”>
<a class=”menu-title” href=”#”>SERVICES</a>
<div class=”submenu-container”>
<div class=”submenu grid”>
<a href=”#”>
<div class=”submenu-column”>
<div class=”icon”>
<svg xmlns=”http://www.w3.org/2000/svg” fill=”none” viewBox=”0 0 24 24″ stroke-width=”1.5″ stroke=”currentColor” class=”w-6 h-6″>
<path stroke-linecap=”round” stroke-linejoin=”round” d=”M2.25 18.75a60.07 60.07 0 0 1 15.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 0 1 3 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 0 0-.75.75v.75m0 0H3.75m0 0h-.375a1.125 1.125 0 0 1-1.125-1.125V15m1.5 1.5v-.75A.75.75 0 0 0 3 15h-.75M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm3 0h.008v.008H18V10.5Zm-12 0h.008v.008H6V10.5Z” />
</svg>

</div>
<h3>CONSULTANT</h3>
<P>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam porro alias beatae quod, eaque, laboriosam rem aliquid accusantium corporis iusto nihil, voluptates tempora praesentium modi asperiores natus. Ipsam, ducimus laboriosam.</P>

</div>
</a>

<a href=”#”>
<div class=”submenu-column”>
<div class=”icon”>
<svg xmlns=”http://www.w3.org/2000/svg” fill=”none” viewBox=”0 0 24 24″ stroke-width=”1.5″ stroke=”currentColor” class=”w-6 h-6″>
<path stroke-linecap=”round” stroke-linejoin=”round” d=”M2.25 18.75a60.07 60.07 0 0 1 15.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 0 1 3 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 0 0-.75.75v.75m0 0H3.75m0 0h-.375a1.125 1.125 0 0 1-1.125-1.125V15m1.5 1.5v-.75A.75.75 0 0 0 3 15h-.75M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm3 0h.008v.008H18V10.5Zm-12 0h.008v.008H6V10.5Z” />
</svg>

</div>
<h3>CONSULTANT</h3>
<P>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam porro alias beatae quod, eaque, laboriosam rem aliquid accusantium corporis iusto nihil, voluptates tempora praesentium modi asperiores natus. Ipsam, ducimus laboriosam.</P>

</div>
</a>

<a href=”#”>
<div class=”submenu-column”>
<div class=”icon”>
<svg xmlns=”http://www.w3.org/2000/svg” fill=”none” viewBox=”0 0 24 24″ stroke-width=”1.5″ stroke=”currentColor” class=”w-6 h-6″>
<path stroke-linecap=”round” stroke-linejoin=”round” d=”M2.25 18.75a60.07 60.07 0 0 1 15.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 0 1 3 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 0 0-.75.75v.75m0 0H3.75m0 0h-.375a1.125 1.125 0 0 1-1.125-1.125V15m1.5 1.5v-.75A.75.75 0 0 0 3 15h-.75M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm3 0h.008v.008H18V10.5Zm-12 0h.008v.008H6V10.5Z” />
</svg>

</div>
<h3>CONSULTANT</h3>
<P>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam porro alias beatae quod, eaque, laboriosam rem aliquid accusantium corporis iusto nihil, voluptates tempora praesentium modi asperiores natus. Ipsam, ducimus laboriosam.</P>

</div>
</a>

<a href=”#”>
<div class=”submenu-column”>
<div class=”icon”>
<svg xmlns=”http://www.w3.org/2000/svg” fill=”none” viewBox=”0 0 24 24″ stroke-width=”1.5″ stroke=”currentColor” class=”w-6 h-6″>
<path stroke-linecap=”round” stroke-linejoin=”round” d=”M2.25 18.75a60.07 60.07 0 0 1 15.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 0 1 3 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 0 0-.75.75v.75m0 0H3.75m0 0h-.375a1.125 1.125 0 0 1-1.125-1.125V15m1.5 1.5v-.75A.75.75 0 0 0 3 15h-.75M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm3 0h.008v.008H18V10.5Zm-12 0h.008v.008H6V10.5Z” />
</svg>

</div>
<h3>CONSULTANT</h3>
<P>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam porro alias beatae quod, eaque, laboriosam rem aliquid accusantium corporis iusto nihil, voluptates tempora praesentium modi asperiores natus. Ipsam, ducimus laboriosam.</P>

</div>
</a>

<a href=”#”>
<div class=”submenu-column”>
<div class=”icon”>
<svg xmlns=”http://www.w3.org/2000/svg” fill=”none” viewBox=”0 0 24 24″ stroke-width=”1.5″ stroke=”currentColor” class=”w-6 h-6″>
<path stroke-linecap=”round” stroke-linejoin=”round” d=”M2.25 18.75a60.07 60.07 0 0 1 15.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 0 1 3 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 0 0-.75.75v.75m0 0H3.75m0 0h-.375a1.125 1.125 0 0 1-1.125-1.125V15m1.5 1.5v-.75A.75.75 0 0 0 3 15h-.75M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm3 0h.008v.008H18V10.5Zm-12 0h.008v.008H6V10.5Z” />
</svg>

</div>
<h3>CONSULTANT</h3>
<P>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam porro alias beatae quod, eaque, laboriosam rem aliquid accusantium corporis iusto nihil, voluptates tempora praesentium modi asperiores natus. Ipsam, ducimus laboriosam.</P>

</div>
</a>

<a href=”#”>
<div class=”submenu-column”>
<div class=”icon”>
<svg xmlns=”http://www.w3.org/2000/svg” fill=”none” viewBox=”0 0 24 24″ stroke-width=”1.5″ stroke=”currentColor” class=”w-6 h-6″>
<path stroke-linecap=”round” stroke-linejoin=”round” d=”M2.25 18.75a60.07 60.07 0 0 1 15.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 0 1 3 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 0 0-.75.75v.75m0 0H3.75m0 0h-.375a1.125 1.125 0 0 1-1.125-1.125V15m1.5 1.5v-.75A.75.75 0 0 0 3 15h-.75M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm3 0h.008v.008H18V10.5Zm-12 0h.008v.008H6V10.5Z” />
</svg>

</div>
<h3>CONSULTANT</h3>
<P>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam porro alias beatae quod, eaque, laboriosam rem aliquid accusantium corporis iusto nihil, voluptates tempora praesentium modi asperiores natus. Ipsam, ducimus laboriosam.</P>

</div>
</a>
</div>
</div>
</li>

<li class=”has-submenu”>
<a class=”menu-title” href=”#”>AI ART</a>
<div class=”submenu-container”>
<div class=”submenu”>
<h3>We offer excellent AI Image Generation for projects</h3>
<div class=”col-2″>
<div class=”left”>
<img src=”images/ai-art2.jpg” alt=”” />
</div>

<div class=”right”>
<img src=”images/ai-art1.jpg” alt=”” />
<a class=”btn” href=”#”>Create AI Image</a>
</div>

</div>
</li>

</ul>
</nav>
</div>

<div class=”content”>
<h2>Heading 1</h2>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quibusdam
corporis sunt, nobis voluptates atque repellat iste dolor provident vel
rem asperiores architecto fuga, dolorum numquam optio temporibus laborum
molestias esse.
</p>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quibusdam
corporis sunt, nobis voluptates atque repellat iste dolor provident vel
rem asperiores architecto fuga, dolorum numquam optio temporibus laborum
molestias esse.
</p>

<h2>Heading 1</h2>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quibusdam
corporis sunt, nobis voluptates atque repellat iste dolor provident vel
rem asperiores architecto fuga, dolorum numquam optio temporibus laborum
molestias esse.
</p>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quibusdam
corporis sunt, nobis voluptates atque repellat iste dolor provident vel
rem asperiores architecto fuga, dolorum numquam optio temporibus laborum
molestias esse.
</p>

<h2>Heading 1</h2>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quibusdam
corporis sunt, nobis voluptates atque repellat iste dolor provident vel
rem asperiores architecto fuga, dolorum numquam optio temporibus laborum
molestias esse.
</p>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quibusdam
corporis sunt, nobis voluptates atque repellat iste dolor provident vel
rem asperiores architecto fuga, dolorum numquam optio temporibus laborum
molestias esse.
</p>

<h2>Heading 1</h2>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quibusdam
corporis sunt, nobis voluptates atque repellat iste dolor provident vel
rem asperiores architecto fuga, dolorum numquam optio temporibus laborum
molestias esse.
</p>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quibusdam
corporis sunt, nobis voluptates atque repellat iste dolor provident vel
rem asperiores architecto fuga, dolorum numquam optio temporibus laborum
molestias esse.
</p>
</div>

</body>
</html>

mega menu

.content{
font-family: ‘Gill Sans’, ‘Gill Sans MT’, Calibri, ‘Trebuchet MS’, sans-serif;
max-width: 600px;
margin-inline: auto;
margin-top: 100px;

}
.content h2{
font-size: 80px;
margin: 0;
}
.mega-menu-container{
font-family: ‘Trebuchet MS’, ‘Lucida Sans Unicode’, ‘Lucida Grande’, ‘Lucida Sans’, Arial, sans-serif;
font-size: 15px;
color: #023048;
}
.mega-menu-container ul{
list-style: none;

}
.mega-menu-container,.mega-menu-container *{
box-sizing: border-box;
}
.mega-menu-container a{
text-decoration: none;
color: #023048;
display: inline-block;

}
.mega-menu{
position: fixed;
top: 16px;
left: 0;
right: 0;
max-width: 900px;
margin: 0 auto;
box-shadow: 0 4px 30px -7px rgba(0, 0, 0, 0.1);
background: white;
}


.mega-menu > ul{
display: flex;
list-style: none;
max-width: 800px;
margin: 0 auto;
justify-content: center;
align-items: center;
gap: 32px;
}
.mega-menu-container .menu-title{
font-weight: bold;
padding: 16px 8px;
}
.mega-menu .menu-title{
position: relative;
}

.mega-menu .menu-title::after{
content: “”;
height: 0px;
width: 0;
background: aquamarine;
position: absolute;
left: 0;
bottom: 0;
transition: all 500ms ease;
}
.mega-menu ul li:hover >.menu-title::after{
height: 4px;
width: 100%;

}

.has-submenu::after{
content: “+”;
font-size: 20px;
}
.mega-menu-container .submenu-container{
opacity: 0;
position: absolute;
pointer-events: none;
left: 0;
top: 35px;
transform: translatex(-50px);
transition: all 900ms ease;
}
.has-submenu:hover .submenu-container{
opacity: 1;
pointer-events: auto;
transform: translatex(0);


}
.submenu .col-3 img{
width: 100%;
}
.submenu .col-3 {
display: flex;
gap: 32px;
border-top: 1px solid rgba(2, 48, 71, 0.2);
}
.submenu{
background: #fff;
padding: 25px 24px;
margin-top: 15px;
box-shadow: 0 4px 30px -7px rgba(0, 0, 0, 0.2);
}
.col-3 ul li{
padding: 0;
padding-left: 12px;
margin: 12px 0px;
position: relative;
}
.col-3 ul li::before{
content: “”;
position: absolute;
width: 4px;
height: 20px;
left: 0;
background: red;
transition: all 40ms ease;
}

.col-3 ul li:hover::before{
width: 6px;
background: rgb(97, 7, 116);

}

responsive mega menu

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Hemburger Menu </title>
<link rel=”stylesheet” href=”style.css”>
</head>
<body>
<nav>
<div class=”logo”>
<h1>Logo</h1>
</div>
<ul id=”menuList”>
<li><a href=””>Home</a></li>
<li><a href=””>About</a></li>
<li><a href=””>Services</a></li>
<li><a href=””>Product</a></li>
<li><a href=””>Contact</a></li>
</ul>
<div class=”menu-icon”>
<i class=”fa-solid fa-bars” onclick=”toggleMenu()”></i>
</div>
</nav>


<script>
let menuList = document.getElementById(“menuList”)
menuList.style.maxHeight = “0px”;

function toggleMenu(){
if(menuList.style.maxHeight == “0px”)
{
menuList.style.maxHeight = “300px”;
}
else{
menuList.style.maxHeight = “0px”;
}
}

</script>
<script src=”https://kit.fontawesome.com/f8e1a90484.js” crossorigin=”anonymous”></script>
</body>
</html>

responsive mega menu

*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}

html,body{
height: 100%;
width: 100%;
background: #3498db;
}

nav{
padding: 10px 30px;
display: flex;
align-items: center;
justify-content: space-between;
background: #004274;
position: relative;
height: 70px;
}

.logo{
color: #fff;
}

nav ul{
display: flex;
gap: 30px;
align-items: center;
}

nav ul li{
list-style-type: none;
}

nav ul li a{
text-decoration: none;
color: #fff;
}

.menu-icon{
display: none;
}

.menu-icon i{
color: #fff;
font-size: 30px;
}

@media (max-width:600px) {
nav ul{
position: absolute;
top: 70px;
left: 0;
right: 0;
flex-direction: column;
text-align: center;
background: #004274;
gap: 0;
overflow: hidden;
}
nav ul li{
padding: 20px;
padding-top: 0;
}
.menu-icon{
display: block;
}
#menuList{
transition: all 0.5s;
}
}