How To Create Wordpress Website
 |
| Photo by Domenico Loia on Unsplash |
Without coding... and still a website? 🤯 Yes, it’s possible!
Many people believe that only those who’ve learned coding or have deep computer knowledge can create a website. But let me tell you — that’s absolutely not true! 🙅♂️💻 With the advancement of technology, the doors are now wide open for everyone — even if you have just a little knowledge of computers, or none at all! 🚪✨ There are two secret weapons 🕵️♂️ to build a website without writing a single line of code: WordPress Plugins Anyone can create a website using WordPress — yes, anyone, even if you have zero technical skills. And trust me, for beginners, WordPress is no less than heaven 😇. You can build a website on WordPress for free, without buying hosting or a domain, by installing something called XAMPP. Or, if you’re ready to take things to the next level, you can buy hosting and a domain from Hostinger. 👉 Pro tip: Hostinger is my personal favorite — I’ve bought all my hosting from there because their prices are super affordable 💸. Now, if you choose to create a website using XAMPP, you might face a few small issues. For example, there’s an option called MySQL that can keep shutting down repeatedly 😓 — kind of annoying, but manageable. Up to this point, the steps are the same whether you're a coder or not. But here’s where your path separates from coders... 👉 And your path becomes way more comfortable — thanks to plugins! 🎉 There are tons of plugins out there, which can honestly get a bit overwhelming. But don’t worry — I’ll guide you through which ones to use to keep your journey smooth and stress-free 🧘♂️. Whether you want a basic website or something more advanced, these plugins will work for you. And when you’re ready to level up, you can simply upgrade to their pro versions 💼✨. So get ready — because today’s list of tools is going to be super useful, not just today but for years to come. You’ll be able to create a stunning, fully functional website without coding, completely beginner-friendly, and with a responsive design that works on every device — mobile, laptop, or tablet! 📱💻🖥️ |
Elementor:
🛠️ Designing Your Page — The Fun Part Begins!
As soon as you install WordPress, you’ll need something to design your page. There are a bunch of options out there — you could use Artificial Intelligence tools, or go with a page builder like Beaver Builder.
But out of all these, the one I found to be the best and simplest is... 🥁 Elementor! 🎨✨
👉 Ooo, I’ve used this one myself, and trust me — it’s a total game-changer. From the moment I started using Elementor, I felt like I was designing like a pro, without needing to know a single line of code. 😎
Here’s how to get started:
Go to Plugins in your WordPress dashboard.
Click on Add New and search for Elementor (it’s made by the Elementor team itself).
Install and activate it ✅.
Once that’s done, head over to your site and open any single page. If you haven’t installed a theme yet, your page will just show “Hello World” (classic 😅).
But don’t worry — you can easily add a theme by going to Appearance > Themes, and from there, you can install themes like Astra or OceanWP. Both are beautifully designed and super easy to use 🧑🎨💡.
Now, go back to your site — on the top strip, you’ll see Edit with Elementor. Click on that!
On the left side, you’ll see the full Elementor toolbar.
On the right side, you’ll see your page preview.
Simply drag and drop the tools onto your page — it’s like playing with building blocks! 🧱
Elementor gives you:
📦 Image Box
✍️ Text Box
📁 Container
🔧 Shortcodes
Just don’t forget to hit Publish — otherwise, all your awesome creativity might vanish like a magician’s trick! 🎩💨
And that’s it — you just designed a whole page without a single line of code. How cool is that?! 🥳👏
WP Forms:
📬 Creating a Contact Form (And a Sneaky Newsletter Form Too 😉)
Let’s talk about WPForms, an awesome plugin by Syed Balkhi — and trust me, it’s a lifesaver! 🙌 It’s super simple to set up and makes creating forms feel like a breeze.
When you build your site, there are two things you’ll definitely need:
A contact form 📝
A newsletter form 📧
👉 While we’ll dive deeper into newsletters with another plugin later, for now — since we’re still in the learning phase — you can use WPForms for both. And yes, it’s completely free!
Here’s what to do:
Go to the Plugins area in WordPress.
Search for WPForms, install it, and activate it.
Once it’s activated, click on WPForms from your dashboard.
Choose the type of form you want to create — there are ready-made templates!
You’ll see various fields like:
👤 Name
📧 Email
☎️ Phone (optional)
Just add or remove whatever fields you need. It’s all drag-and-drop — no stress, no coding.
🎯 There’s also a super useful feature inside WPForms:
Head to Settings > Notifications.
This is where you tell WPForms:
💡 “Hey, whenever someone fills out this form, send me an email!”
But make sure:
The email linked to your WordPress site is active 📬
You actually have access to it!
💡 If not, no worries — just go into WPForms > Settings > Notifications and update the email address.
🧠 Now you might be thinking, “Why would I care who fills out my form?”
Great question!
Well, every time someone submits your form, you’re collecting a potential lead — someone who could become your customer in the future. These emails can be super valuable for email marketing later on 🤑. (Don’t worry — that’s a digital marketer’s job. For now, just focus on learning the basics 😄).
🎉 Ooo, I remember when I did this part too!
As a non-coder, WPForms felt magical to me. At first, WordPress seemed huge and kinda scary — but now? It’s second nature. If I can do it, so can you! 💪💙
📌 Once your form is complete:
Click Save.
Go to the WPForms dashboard.
Copy the shortcode of your form.
Head over to the page where you want to place it.
If you’re not sure how to do that:
Find the ➕ plus icon on a new block in the WordPress page editor.
Type “shortcode” and select the shortcode block.
Paste your copied WPForms code there.
Hit Publish — and voilà! Your form is live on the site! 🚀✨
Image optimizer:
🖼️ Making Your Website Look Great on All Devices (Without Coding!)
Okay, so this isn’t exactly a plugin, but it’s super important 🔍:
👉 If you want your website to look just as amazing on mobile, tablet, and desktop as it does while you're building it on your laptop — then your images need to be top-notch and properly sized.
Let me be honest with you — when I was learning WordPress, this was a huge issue for me 😅. I had no clue about what the width or height of specific images should be. Zero idea.
But here’s what I’ve learned (and now I’m passing that knowledge to you like a good friend 😎):
📌 Pro Tip #1: Use Images That Fit Your Theme
When you download a WordPress theme, it often comes with demo images that are already perfectly formatted. These are great for practice and can help you understand how images should look and feel on your site.
But if you’re downloading images from other websites, keep these points in mind:
✅ Use images in JPG, JPEG, or WebP format
🚫 Avoid using other formats (like PNGs with huge file sizes), because WordPress may not accept them
💡 When you download an image, check its format — it usually shows right in the file name or properties. Most tutorials don’t tell you this, but trust me, I’ve learned the hard way. 🥲
📏 Pro Tip #2: Sizing Matters (A Lot)
Now, if you want a square image or custom sizes, WordPress gives you some default options — but Elementor makes it way easier!
When you’re editing with Elementor:
Click on any image
You’ll see size options like Square, Medium, Full, and even Custom
In Custom, you can manually adjust the width and height according to your needs
Here are some size combos that work really well:
🔲 Big Square: 378 x 379
🔳 Small Rectangle: 644 x 402
💬 I’ve personally used these sizes, and they look super clean and professional — try them out!
⚙️ Want to Optimize Images for Speed?
There are some awesome plugins (when you’re ready to go live) that reduce your image size without losing quality. One of the best ones is:
🚀 Smush (by the team at WP Rocket)
It uses something called lazy loading, which means:
📉 Images that aren’t currently being viewed (like on a contact page) won’t load until needed. This keeps your site speedy and smooth — which is great for user experience!
But don’t worry about that just yet. Right now, your site isn’t live — you’re just in practice mode, and that’s perfect. No need to overload yourself with plugins just yet. 😌
✨ Ooo, this one hit close to home for me too!
When I started, figuring out image sizes was frustrating. But now I know exactly what to do — and so do you! Just remember those 3–4 go-to sizes, and you’ll be good to go 💪
And the best part? Yep... still no coding! 😎🎉
OTP VERIFICATION:
🔐 “I Want OTP Like Other Websites!” — Say No More!
When you're just starting out and create your first contact form, a thought always pops into your head:
🤔 “Wait… when I fill out a form on other websites, I get an OTP on my email or phone. I want that too!”
And I totally get it — I had the same thought! 😅
But then reality hits… 💸
All those fancy plugins that offer OTP verification? Yeah, most of them want you to pay for the pro version.
But let’s be honest — when you’re building your first website, who’s got the money for that? I didn’t either! 😂
🕵️♂️ So I started hunting... plugin after plugin... and finally I found a gem:
✨ OTP Verification by MiniOrange — and the best part? It works for free (at least for basic use)! 🙌
Here’s how I set it up (and you can too):
Install the plugin OTP Verification by MiniOrange from the WordPress plugin area.
Open its dashboard.
It’ll ask:
🔘 Do you want Email OTP or Phone OTP?
👉 If your form (created with WPForms) has only an email field, select Email OTP.
👉 If it has a phone field, go with Phone OTP.
👉 If you have both — just pick one (you can’t use both on the free version).
📄 Now here's the slightly techy part — but don’t worry, I’ve got your back:
In the plugin settings, it’ll ask for your Form ID.
For example, if your WPForm's shortcode is [wpforms id="123"], then your Form ID is 123.
✅ Just enter that number.
Next, it will ask:
💬 “What is the name of the field where you're asking for the email or phone?”
Simply type the field label exactly as you wrote it in your form — like Email, Email ID, or Phone Number.
🧪 As soon as this setup is done, whenever someone fills your form, they’ll receive an OTP to verify! How cool is that?
You’ll also see a few other options in the plugin like:
🔘 Send OTP button
🧾 Enter OTP field
✅ Verify OTP button
👉 You don’t need to mess with them — just let them be. Just fill in your Form ID, and boom 💥 — you're done.
🥳 And just like that... the biggest task in the world is complete!
I still remember how cool it felt when my form sent its first OTP — I was like “Whoa, I made this?!” 😍
And again — all this happened without any coding!
Classical widgets:
🧩 Widgets Confusing You? Let Me Show You the Easy Way!
So first, let’s talk about where you’ll find widgets in WordPress.
Go to Appearance > Widgets.
Now, if you're seeing the new version of the Widgets interface... well, let me just say — I don’t like it either! 😩 It can feel super confusing, especially if you’re not into coding (like me).
👉 And as a non-coder, unless something is easy to understand, my brain just refuses to cooperate! 😂
That’s why I personally use the Classic Widgets — the old-school version that most people still prefer. It's simple, clean, and actually makes sense.
🛠️ But first, check your theme layout:
Does your site have a footer?
Is there a header, or sidebar?
And what plugins are already installed?
Widgets often auto-adjust depending on your theme and the kind of plugins you’re using. Some plugins will even add their own widgets — like newsletter signups, social feeds, etc.
Let me explain with an example:
You’ve probably seen websites that have menus in the footer (at the bottom of the page) and at the top in the header. Here's how you can set up a footer menu:
🧭 Step-by-step: Add a Menu to Your Footer
Go to Appearance > Menus
Create a new menu and name it something like "Footer Menu"
Add the pages or links you want in the footer, then Save
Now go to Appearance > Widgets
In the Classic Widgets view, you'll see two panels:
On the left, all available widgets — like Navigation Menu, Newsletter, Mail Services, etc.
On the right, widget areas like Sidebar, Footer, Header (depending on your theme)
From the left side, drag the Navigation Menu widget into the Footer section on the right
Select the "Footer Menu" you just created from the dropdown
Click Save ✅
🎉 Now go to your website — boom! You’ll see your new menu in the footer.
🔁 My Real Struggle (And Solution)
I remember when I was building my site, I kept wondering:
“Where are all these widgets people are using? Why don’t I see the same options?” 🤯
After a ton of searching (and a few mini meltdowns 😅), I finally found a plugin called Classic Widgets — and wow, what a relief! Since then, it’s been my go-to solution, and today I’m sharing it with you so you don’t go through the same confusion.
Trust me — use Classic Widgets, and everything becomes easier. 💡
Conclusion:
🎯 Now It’s YOUR Turn to Build a Website — No Coding Needed!
Look at you! 😎 You now have everything you need to build your very own WordPress website:
✅ A beautiful theme
✅ A powerful page builder (hello, Elementor!)
✅ Knowledge of image formats & sizes
✅ OTP verification to add that professional touch
✅ The classic widget area (aka your new best friend)
And the best part? You did all this — or will do it — as a non-coder. That’s HUGE! 🙌
So go ahead — start building, experimenting, and show the world what a non-coder can do 💻🚀
💬 Want to Learn More? Comment below!
If you want more detailed guides on things like:
🧱 How to create pages and posts
🍔 How to build custom menus
⚙️ Exploring general settings in WordPress
💌 Setting up a newsletter service
…then just drop a comment below ⬇️
Whatever I’ve learned, I’m more than happy to share with you. We’re in this together! 🤝
✨ And hey, if you want a fully functional, professional website built for you — with all the advanced features and a smooth, modern design — visit my Fiverr profile. Let’s bring your dream site to life! 💼🛠️
Comments
Post a Comment