तरीका 1: XAMPP (लोकल होस्ट) के जरिए फोल्डर बनाना

यदि आप अपने कंप्यूटर पर प्रैक्टिस कर रहे हैं, तो XAMPP फोल्डर में जाकर htdocs/wordpress/wp-content/themes/ के अंदर जाएं और अपनी थीम के लिए takniki-theme नाम से एक नया फोल्डर बनाएं।

तरीका 2: cPanel फाइल मैनेजर के जरिए लाइव वेबसाइट पर फाइलें बनाना

मित्रों, यदि आप लाइव होस्टिंग का उपयोग कर रहे हैं, तो आप सीधे cPanel के जरिए अपनी वेबसाइट में नई फाइलें बना सकते हैं। इसके स्टेप्स नीचे दिए गए हैं:

• स्टेप 1: सबसे पहले अपनी होस्टिंग के cPanel में लॉगिन करें और File Manager को खोलें।
• स्टेप 2: इसके बाद अपनी मुख्य वेबसाइट के रूट फोल्डर (जैसे public_html) में जाएं।
• स्टेप 3: वहाँ से wp-content/themes/ वाले फोल्डर के अंदर प्रवेश करें।
• स्टेप 4: ऊपर दिए गए + Folder बटन पर क्लिक करके takniki-theme नाम का नया फोल्डर बना लें।
• स्टेप 5: अब इस नए फोल्डर के अंदर जाएं और ऊपर दिए गए + File बटन पर क्लिक करके एक-एक करके अपनी सभी जरूरी फाइलें (जैसे style.css, header.php आदि) बनाएं। किसी भी फाइल पर राइट-क्लिक करके Edit ऑप्शन से आप नीचे दिए गए कोड को सीधा पेस्ट और सेव कर सकते हैं।

2. style.css फाइल का संपूर्ण कोड

यह फाइल वर्डप्रेस को आपकी थीम का नाम बताती है और पूरी साइट की डिजाइनिंग को संभालती है:

/*
Theme Name: Takniki Gyan Custom Theme
Theme URI: https://taknikigyan.com/
Author: Er. Rameshwar Singh
Author URI: https://taknikigyan.com/
Description: A highly optimized, lightweight, fast-loading custom WordPress theme built without plugins.
Version: 1.0.0
Text Domain: takniki-theme
*/

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.85;
    background-color: #f8fafc;
    color: #1e293b;
    padding: 0;
    margin: 0;
}

header {
    background: linear-gradient(135deg, #1e40af, #3b82f6);
    color: #ffffff;
    padding: 25px 20px;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

header h1 a {
    color: #ffffff;
    text-decoration: none;
    font-size: 28px;
    font-weight: 800;
}

header p {
    font-size: 15px;
    opacity: 0.9;
    margin-top: 5px;
}

main {
    max-width: 900px;
    margin: 35px auto;
    padding: 25px;
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid #cbd5e1;
    box-shadow: 0 4px 20px rgba(0,0,0,0.03);
}

article {
    margin-bottom: 35px;
    padding-bottom: 25px;
    border-bottom: 1px solid #e2e8f0;
}

article h2 a {
    color: #1e40af;
    text-decoration: none;
    font-size: 22px;
    font-weight: 700;
}

article h2 a:hover {
    color: #2563eb;
    text-decoration: underline;
}

footer {
    background-color: #0f172a;
    color: #94a3b8;
    text-align: center;
    padding: 20px;
    margin-top: 40px;
    font-size: 14.5px;
}

3. header.php फाइल का संपूर्ण कोड

यह फाइल आपकी वेबसाइट का हेडर और HTML के हेड टैग्स तैयार करती है:

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo('charset'); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php wp_title('|', true, 'right'); ?> <?php bloginfo('name'); ?></title>
    <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
    <?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>

<header>
    <div class="header-container">
        <h1><a href="<?php echo esc_url(home_url('/')); ?>"><?php bloginfo('name'); ?></a></h1>
        <p><?php bloginfo('description'); ?></p>
    </div>
</header>

4. index.php फाइल का संपूर्ण कोड

यह मुख्य टेम्प्लेट फाइल है जो होमपेज पर लेटेस्ट ब्लॉग पोस्ट्स को लूप करके दिखाती है:

<?php get_header(); ?>

<main>
    <?php if ( have_posts() ) : ?>
        <?php while ( have_posts() ) : the_post(); ?>
            <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
                <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                <div style="color: #64748b; font-size: 14px; margin-bottom: 12px;">
                    प्रकाशित तिथि: <?php echo get_the_date(); ?> | लेखक: <?php the_author(); ?>
                </div>
                <div class="post-excerpt" style="color: #334155; font-size: 16px;">
                    <?php the_excerpt(); ?>
                </div>
            </article>
        <?php endwhile; ?>
        
        <div class="pagination" style="text-align: center; margin-top: 20px;">
            <?php the_posts_pagination(); ?>
        </div>
    <?php else : ?>
        <p>क्षमा करें, अभी कोई पोस्ट उपलब्ध नहीं है।</p>
    <?php endif; ?>
</main>

<?php get_footer(); ?>

5. single.php फाइल का संपूर्ण कोड

जब कोई पाठक किसी एक ब्लॉग पोस्ट पर क्लिक करता है, तब यह पूरी पोस्ट लोड करती है:

<?php get_header(); ?>

<main>
    <?php while ( have_posts() ) : the_post(); ?>
        <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
            <h1 style="color: #0f172a; font-size: 26px; font-weight: 800; margin-bottom: 10px;"><?php the_title(); ?></h1>
            <div style="color: #64748b; font-size: 14px; margin-bottom: 20px; border-bottom: 1px solid #e2e8f0; padding-bottom: 10px;">
                तारीख: <?php echo get_the_date(); ?> | कैटेगिरी: <?php the_category(', '); ?>
            </div>
            <div class="entry-content" style="font-size: 17.5px; line-height: 1.85; color: #334155;">
                <?php the_content(); ?>
            </div>
        </article>

        <?php 
        if ( comments_open() || get_comments_number() ) :
            comments_template();
        endif;
        ?>
    <?php endwhile; ?>
</main>

<?php get_footer(); ?>

6. page.php फाइल का संपूर्ण कोड

वेबसाइट के मुख्य स्टैटिक पेजेस (About Us, Contact Us) के लिए:

<?php get_header(); ?>

<main>
    <?php while ( have_posts() ) : the_post(); ?>
        <article id="page-<?php the_ID(); ?>" <?php post_class(); ?>>
            <h1 style="color: #0f172a; font-size: 26px; font-weight: 800; margin-bottom: 18px;"><?php the_title(); ?></h1>
            <div class="page-content" style="font-size: 17px; line-height: 1.8; color: #334155;">
                <?php the_content(); ?>
            </div>
        </article>
    <?php endwhile; ?>
</main>

<?php get_footer(); ?>

7. comments.php फाइल का संपूर्ण कोड

पाठकों के कमेंट्स और रिप्लाई फॉर्म को दिखाने के लिए:

<?php
if ( post_password_required() ) {
    return;
}
?>

<div id="comments" style="margin-top: 35px; padding: 22px; background: #f8fafc; border-radius: 10px; border: 1px solid #cbd5e1;">
    <h3 style="color: #1e40af; font-size: 20px; margin-top: 0; margin-bottom: 15px;">
        <?php comments_number('कोई टिप्पणी नहीं', '1 टिप्पणी', '% टिप्पणियाँ'); ?>
    </h3>

    <ul class="comment-list" style="list-style: none; padding: 0; margin-bottom: 20px;">
        <?php
        wp_list_comments(array(
            'style'      => 'ul',
            'short_ping' => true,
            'avatar_size'=> 48,
        ));
        ?>
    </ul>

    <?php
    comment_form(array(
        'title_reply' => 'अपनी प्रतिक्रिया या सवाल नीचे लिखें',
        'label_submit'=> 'कमेंट पोस्ट करें',
    ));
    ?>
</div>

8. footer.php फाइल का संपूर्ण कोड

फुटर फाइल, जिसमें अनिवार्य `wp_footer()` हुक शामिल है:

<footer>
    <div class="footer-container">
        <p>© <?php echo date('Y'); ?> <?php bloginfo('name'); ?> | सर्वाधिकार सुरक्षित।</p>
    </div>
</footer>

<?php wp_footer(); ?>
</body>
</html>

9. डैशबोर्ड से नई थीम एक्टिवेट करना

जब सातों फाइलें सेव हो जाएं, तो वर्डप्रेस एडमिन पैनल में Appearance > Themes पर जाकर अपनी “Takniki Gyan Custom Theme” को **Activate** कर लें।

Q1. क्या बिना प्लगइन की कस्टम थीम पर एडसेंस अप्रूवल मिलता है?

उत्तर: हाँ, बिल्कुल! गूगल एडसेंस को कंटेंट की क्वालिटी और यूजर एक्सपीरियंस से मतलब होता है।

Q2. cPanel फाइल मैनेजर से कोडिंग करना कितना सुरक्षित है?

उत्तर: यह पूरी तरह सुरक्षित और तेज तरीका है। बस ध्यान रखें कि किसी भी फाइल को एडिट करने से पहले उसका बैकअप ज़रूर ले लें।

Q3. क्या कोडिंग में गलती होने पर वेबसाइट क्रैश हो सकती है?

उत्तर: PHP सिंटैक्स एरर आने पर दिक्कत हो सकती है, इसलिए cPanel से एडिट करते वक्त कोड की सावधानी रखें।