Don’t do anything with them for now, just keep them open. You’ll need them soon.<\/p>\n\n\n\n
2. Transferring CSS: How to Copy Existing Styles to Your WordPress Style Sheet <\/h2>\n\n\n\n
Now, let’s get your WordPress style sheet ready (that’s the file style.css you just made) to hold your old site’s CSS. Open up the file and paste in this text:<\/p>\n\n\n\n
\/*
Theme Name: My Awesome Theme
Theme URI: https:\/\/example.com\/my-awesome-theme
Author: Your Name
Author URI: https:\/\/example.com\/about
Description: A brief description of your theme.
Version: 1.0
License: Your License
License URI: https:\/\/example.com\/license
Tags: Tag1, Tag2, Tag3
Text Domain: my-awesome-theme<\/p>\n\n\n\n
Make sure to replace the placeholder text with your own details. This will help WordPress understand and organize your theme.<\/p>\n\n\n\n
This part is called the style sheet header (make sure to include the comment \/\u2026<\/em>\/ tags!). Fill in each part like this:<\/p>\n\n\n\n After the header, paste the existing CSS from your HTML site. Save the file in your new theme folder and close it. Then, you can move on to the next step.<\/p>\n\n\n\n In WordPress, information is often fetched from a database using PHP. To make this work smoothly, you need to break your HTML into smaller parts. It’s like cutting a cake into slices so that the website builder (CMS) can assemble them correctly.<\/p>\n\n\n\n For example, imagine you have a webpage with different sections like the header, footer, and main content. Instead of having all these in one big HTML file, you’d split them into separate PHP files. So, the header goes in one file, the footer in another, and so on.<\/p>\n\n\n\n This makes it easier for WordPress to manage and display your content properly on the website. It’s like organizing your ingredients before cooking a meal!<\/p>\n\n\n\n Look, this is a typical webpage layout with different parts like the top, middle, side, and bottom. Here’s how it works:<\/p>\n\n\n\n The top part is called the header. It’s like the title of a book. All these parts are written in a code called HTML. It’s like language computers understand to make webpages. Simple, right? <\/p>\n\n\n\n First, open your main file in your website folder, usually called index.html. Then, take a look at the files you made for your WordPress site. Copy the stuff I’m going to show you next and paste it into those files.<\/p>\n\n\n\n In this file, you’ll find everything from the start of your website’s layout to where the main content begins. This is usually marked with something like or<\/p>\n\n\n\n Just before the closing tag, add. This small addition is really important for many WordPress plugins to function correctly.<\/p>\n\n\n\n Everything belonging to the section In the Here’s how it looks:<\/p>\n\n\n\n <\/main> <!– #main –> <\/div> <!– #main-container –> <div class=”footer-container”> <footer class=”wrapper”> <p class=”footer-credits”>\u00a9 2019 My Imaginary Website<\/p> <\/footer> <\/div> <?php wp_footer(); ?> <\/body> <\/html><\/p>\n\n\n\n And here’s the added text:<\/p>\n\n\n\n After that, you are done with index.html and can close it. Save all other files to your theme folder and close them except for header.php and index.php. You have some more work to do with them.<\/p>\n\n\n\n For the header, you just need to update the call for the style sheet to work with WordPress. In the Replace it with this WordPress format:<\/p>\n\n\n\n Once you’ve made this change, save and close the These lines are calls to include other necessary files in your theme. You’ll notice a space between the call for the header and the sidebar. This is where you’ll add The Loop.<\/p>\n\n\n\n The Loop is a crucial part of WordPress that outputs content created in the backend. It dynamically adds content to your pages. Paste the following code after After adding this, save and close the Sure, here’s a rewrite:<\/p>\n\n\n\n Sure, here’s a simplified version:<\/p>\n\n\n\n Now, you’ll add a picture of your theme, which will show how your website looks in the WordPress dashboard.<\/p>\n\n\n\n First, open your website in a browser and take a picture of it. Then, use any image editing software to make it 880\u00d7660 pixels in size. Save it as ‘screenshot.png’ and put it in your theme folder.<\/p>\n\n\n\n Now, you’re ready to upload your theme. There are a few ways to do this, but all your theme files need to be in one folder.<\/p>\n\n\n\n One way is to make a zip file of your theme. Then, go to your WordPress site, click on ‘Appearance,’ then ‘Themes.’ Next, click ‘Add New’ at the top, and then ‘Upload Theme.<\/p>\n\n\n\n <\/p>\n","protected":false},"excerpt":{"rendered":" Introduction In today\u2019s digital age, having a dynamic and flexible website is crucial for success, especially for small businesses and entrepreneurs in India and Kashmir. WordPress, known for its simplicity and robust features, is one of the most popular content management systems (CMS) globally. It\u2019s particularly appealing to those who wish to upgrade from a […]<\/p>\n","protected":false},"author":11,"featured_media":610,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-607","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-client-stories"],"acf":[],"_links":{"self":[{"href":"https:\/\/elyspace.com\/blog\/wp-json\/wp\/v2\/posts\/607","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elyspace.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elyspace.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elyspace.com\/blog\/wp-json\/wp\/v2\/users\/11"}],"replies":[{"embeddable":true,"href":"https:\/\/elyspace.com\/blog\/wp-json\/wp\/v2\/comments?post=607"}],"version-history":[{"count":9,"href":"https:\/\/elyspace.com\/blog\/wp-json\/wp\/v2\/posts\/607\/revisions"}],"predecessor-version":[{"id":623,"href":"https:\/\/elyspace.com\/blog\/wp-json\/wp\/v2\/posts\/607\/revisions\/623"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elyspace.com\/blog\/wp-json\/wp\/v2\/media\/610"}],"wp:attachment":[{"href":"https:\/\/elyspace.com\/blog\/wp-json\/wp\/v2\/media?parent=607"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elyspace.com\/blog\/wp-json\/wp\/v2\/categories?post=607"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elyspace.com\/blog\/wp-json\/wp\/v2\/tags?post=607"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}\n
3. Dividing Your HTML Elements<\/h2>\n\n\n\n
![\"\"](\"https:\/\/elyspace.com\/blog\/wp-content\/uploads\/2024\/05\/website-Title-1024x533.jpg\")
<\/figure>\n\n\n\n
Then comes the main part, where you put your main content, like the story in a book.
On the side, there’s a sidebar where you can put extra stuff, like bookmarks in a book.
Finally, at the bottom, there’s the footer. It’s like the end of a book, where you find extra information.<\/p>\n\n\n\n<!DOCTYPE html>\n<html>\n<head>\n <meta charset=\"utf-8\">\n <title>Website Title<\/title>\n <meta name=\"description\" content=\"Website description\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n <link rel=\"stylesheet\" href=\"style.css\">\n<\/head>\n<body>\n <div class=\"header-container\">\n <header class=\"wrapper clearfix\">\n <h1 class=\"title\">Website Title<\/h1>\n <nav>\n <ul>\n <li><a href=\"#\">nav item #1<\/a><\/li>\n <li><a href=\"#\">nav item #2<\/a><\/li>\n <li><a href=\"#\">nav item #3<\/a><\/li>\n <\/ul>\n <\/nav>\n <\/header>\n <\/div>\n\n <div class=\"main-container\">\n <main class=\"main wrapper clearfix\">\n <article>\n <header class=\"entry-header\">\n <h2 class=\"entry-title\">Article Title<\/h2>\n <\/header>\n <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec.<\/p>\n <h2>Subheading<\/h2>\n <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec. Curabitur posuere enim eget turpis feugiat tempor. Etiam ullamcorper lorem dapibus velit suscipit ultrices. Proin in est sed erat facilisis pharetra.<\/p>\n <h2>Subheading<\/h2>\n <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec. Curabitur posuere enim eget turpis feugiat tempor. Etiam ullamcorper lorem dapibus velit suscipit ultrices. Proin in est sed erat facilisis pharetra.<\/p>\n <\/article>\n <aside>\n <h3>Sidebar<\/h3>\n <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec. Curabitur posuere enim eget turpis feugiat tempor. Etiam ullamcorper lorem dapibus velit suscipit ultrices.<\/p>\n <\/aside>\n <\/main>\n <\/div>\n\n <div class=\"footer-container\">\n <footer class=\"wrapper\">\n <p class=\"footer-credits\">\u00a9 2019 My Imaginary Website<\/p>\n <\/footer>\n <\/div>\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\nheader.php<\/h2>\n\n\n\n
<!doctype html>\n <html>\n <head>\n <meta charset=\"utf-8\">\n <title>Website Title<\/title>\n <meta name=\"description\" content=\"Website description\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n <link rel=\"stylesheet\" href=\"style.css\">\n <?php wp_head();?>\n <\/head>\n <body>\n <div class=\"header-container\">\n <header class=\"wrapper clearfix\">\n <h1 class=\"title\">Website Title<\/h1> \n <nav>\n <ul>\n <li><a href=\"#\">nav item #1<\/a><\/li>\n <li><a href=\"#\">nav item #2<\/a><\/li>\n <li><a href=\"#\">nav item #3<\/a><\/li>\n <\/ul>\n <\/nav>\n <\/header>\n <\/div>\n <div class=\"main-container\">\n <main class=\"main wrapper clearfix\"><\/pre>\n\n\n\n
sidebar.php<\/h4>\n\n\n\n
<aside><\/code>\u00a0goes into this WordPress file.<\/strong><\/p>\n\n\n\n<aside>
<h3>Sidebar<\/h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec. Curabitur posuere enim eget turpis feugiat tempor. Etiam ullamcorper lorem dapibus velit suscipit ultrices.<\/p>
<\/aside><\/pre>\n\n\n\nFooter.php<\/h2>\n\n\n\n
footer.php<\/code> file, everything from where the sidebar ends to the very bottom is where the footer goes. At the end of this footer section, just before the closing <\/body><\/code> tag, add a line that says <?php wp_footer();?><\/code>. This line is important for some technical reasons, just like the wp_head<\/code> line we added in the header.<\/p>\n\n\n\n4. Convert Header.php and Index.php to work with WordPress<\/h2>\n\n\n\n
<head><\/code> section of your, find the existing link to the stylesheet. It might look like this:<\/p>\n\n\n\nhtmlCopy code
<link rel=\"stylesheet\" href=\"style.css\">\n<\/code><\/pre>\n\n\n\nhtmlCopy code
<link rel=\"stylesheet\" href=\"<?php echo get_template_directory_uri(); ?>\/style.css\" type=\"text\/css\" media=\"all\" \/>\n<\/code><\/pre>\n\n\n\nheader.php<\/code> file. Next, open the index.php<\/code> file. It might be empty for now. Copy and paste the following lines of code into it:<\/p>\n\n\n\nphpCopy code
<?php get_header(); ?>\n\n<?php get_sidebar(); ?>\n<?php get_footer(); ?>\n<\/code><\/pre>\n\n\n\n<?php get_header(); ?><\/code>:<\/p>\n\n\n\nphpCopy code
<?php while ( have_posts() ) : the_post(); ?>\n <article class=\"<?php post_class(); ?>\" id=\"post-<?php the_ID(); ?>\">\n <h2 class=\"entry-title\"><?php the_title(); ?><\/h2>\n <?php if ( !is_page() ):?>\n <section class=\"entry-meta\">\n <p>Posted on <?php the_date();?> by <?php the_author();?><\/p>\n <\/section>\n <?php endif; ?>\n <section class=\"entry-content\">\n <?php the_content(); ?>\n <\/section>\n <section class=\"entry-meta\"><?php if ( count( get_the_category() ) ) : ?>\n <span class=\"category-links\">\n Posted under: <?php echo get_the_category_list( ', ' ); ?>\n <\/span>\n <?php endif; ?><\/section>\n <\/article>\n<?php endwhile; ?>\n<\/code><\/pre>\n\n\n\nindex.php<\/code> file. Great job! Your basic theme is now ready to be added to your new WordPress site.<\/p>\n\n\n\n5. Generate a Screenshot and Upload Your Theme<\/h2>\n\n\n\n