WP Pro Guide

Step-by-Step Blueprint

Zero to WordPress
in 15 Minutes.

Stop guessing. Follow this precise visual workflow to set up your environment, install WordPress, and write professional custom code.

1

File Preparation

Getting the WordPress core ready for your local server.

Download & Extract

Download the latest WordPress ZIP. Extract it on your computer. You will see a folder named wordpress.

Move to htdocs

Rename the wordpress folder to your project name (e.g., myproject). Move it to:

C: > xampp > htdocs > [your_folder]
2

The Database Foundation

Creating the storage engine for your website.

Step A: Start XAMPP
  • 1 Open XAMPP Control Panel from your desktop.
  • 2 Click Start next to Apache and MySQL.
Step B: Create DB
3

Running the Wizard

Connecting your files to the database.

1. The Trigger

Open your browser and type:
http://localhost/myproject

Database Config

When the wizard asks, use these:

DB Name: my_db_name

Username: root

Password: (Leave Empty)

Host: localhost

Site Admin

Set your login credentials:

Site Title: Your Website Name

Username: Your Login Name

Password: Use a strong one!

Email: Your real email address

4

Custom Theme Setup

Where the magic happens.

The Theme Path

Create your own folder inside the WordPress theme directory:

myproject > wp-content > themes > my-custom-theme

Inside this folder, you MUST have at least two files: style.css and index.php for WordPress to see your theme in the Dashboard.

Registering "Projects"

Create a Custom Post Type for your portfolio.

File: functions.php
Snippet: PHP
function register_my_projects_cpt() {
    $labels = array(
        'name'               => 'Projects',
        'singular_name'      => 'Project',
        'menu_name'          => 'My Projects',
        'add_new'            => 'Add New Project',
    );

    $args = array(
        'labels'             => $labels,
        'public'             => true,
        'has_archive'        => true,
        'menu_icon'          => 'dashicons-portfolio', // Dashboard Icon
        'supports'           => array('title', 'editor', 'thumbnail', 'excerpt'),
        'show_in_rest'       => true,
    );

    register_post_type('projects', $args);
}
add_action('init', 'register_my_projects_cpt');

The Dynamic Loop

Displaying your projects on the front-end.

File: front-page.php
Snippet: The While Loop
<?php
$args = array(
    'post_type'      => 'projects',
    'posts_per_page' => 6,
);

$project_query = new WP_Query($args);

if ($project_query->have_posts()) : ?>
    <div class="projects-grid">
        <?php while ($project_query->have_posts()) : $project_query->the_post(); ?>
            <div class="project-card">
                <div class="project-image"><?php the_post_thumbnail(); ?></div>
                <h2><?php the_title(); ?></h2>
                <p><?php echo get_the_excerpt(); ?></p>
                <a href="<?php the_permalink(); ?>">View Project</a>
            </div>
        <?php endwhile; wp_reset_postdata(); ?>
    </div>
<?php endif; ?>

Final Result: The Project Card

the_post_thumbnail()
Project Label
the_title()

the_excerpt() — This pulls the short summary you write in the WordPress dashboard for this project.

the_permalink()
Code copied to clipboard!