×

READY FOR A NEW CAREER?

But not sure where to start? Find out if a tech career is right for you.

TAKE THE 3-MINUTE QUIZ

Adding New Pages to Your Site

Get Our Free Ultimate Guide to Coding for Beginners

Get Our Free Ultimate Guide to Coding for Beginners

Make a plan for learning the tech skills you need to land a new job with this 60+ page FREE ebook!

Coding your first web page and getting it online is a big deal, so if you’ve made it this far, congratulations! Still, as much as you deserve a pat on the back, it’s no time to rest on your digital laurels—bringing your first web page to life was huge, but in order to move from a static website to a site that’s compelling and attractive to visitors (while also being findable by search engines), your site needs to have multiple web pages. Wondering exactly what it takes to add new pages to that single page site you’ve already coded and uploaded to a web server? We’ve got you covered.

Hand-coding a website from scratch and building a website using a content management system are two of the most common methods for creating websites. In the case of hand-coding, markup languages like HTML and CSS define the parts of a web page (things like headlines, paragraphs, fonts, and colors) so they’ll render properly in your visitors’ web browser window, while scripting languages like JavaScript control a web page’s dynamic content (slideshows, interactive maps, scrolling video, etc.). If you’re taking the content management system route, software like WordPress (a website builder) is used to create web content through a drop-down menu, forms, and built-in text editors. Since you most likely built the first page of your website using one of these two methods, we’ll go over step-by-step instructions for adding additional pages to both an HTML/CSS site and a WordPress website.

Adding Web Pages to an HTML website

If you’ve started your site by creating a homepage using HTML and CSS, that first page should exist as file titled index.html. This will be a page you created in a text editor using HTML code for those structural elements like headlines and paragraphs, and CSS (either externally, internally, or inline) for page layouts, colors, and font types. If you’re using an external style sheet to define the appearance of your entire website, you’ll also have a .css file containing your external .css code. At this point, those two files (or just the index.html file if your CSS is internal or inline) should be in a dedicated project folder on your desktop. If you’ve already put your one-page website online, you’ll also have uploaded your index.html file (and .css file if applicable) to a web hosting service. With that out of the way, you’re ready to start adding additional pages.

Just like you did with your homepage, open up a text editor and put those HTML coding skills to work. Then, once you’re done coding, save this new page as an .html file with an appropriate filename—for instance, if you’re making an About page for your site, name the file about.html. Add this new file to your project folder alongside index.html, then open up index.html and add text on your homepage with a link to the new page you’ve created—remember, once you start adding additional web pages it’s critical to link each page to all the others so visitors can navigate your website. To help keep track of this as your site begins to grow in pages, it’s a good idea to create a sitemap. This can either be a document kept offline, or a page added to your actual website that literally maps out page placement and how each page links to the others. When you’ve completed these steps, simply upload the new page to your web hosting service via FTP (the exact same way you uploaded your original homepage), and your newest addition to the site will be live.

One tip to keep in mind when working with HTML pages is to clone content when applicable (rather than starting over from scratch with each new web page). By doing this, you can reuse existing code as a template and only create a custom template when necessary—something that will save you a lot of time during your web developer career. To do this, simply start new pages by opening your original index.html page and “saving as” a new page (for instance, the about.html page described above). You’ll then be able to start off with whatever code from your homepage that you want to carry over to your new page, while deleting anything that doesn’t belong and adding new code as needed. This is a lot easier than re-coding every aspect of a new page, or even clicking back and forth between files to copy and paste HTML code.

How to Add New Pages to a WordPress Website

If you’re using WordPress to build and manage a WordPress website, the method for adding a new page is as follows:

Look for the Pages category on the sidebar menu to the left hand side of your screen.

Click on Pages, and select Add New.

Enter a title in the bar under Add New Page, then move to the text editor field below and WordPress will automatically generate a url address for your page:

You can either keep this default url (as in the image above), or edit it by pressing the Edit button. After that, simply add your page’s content in the text editor field, hit the big shiny Publish button when you’re done, and you’ve just got yourself a brand new page for your WordPress website.

Finally, remember—just like with an HTML website—you need include linked text on each page to allow visitors to navigate back and forth across your WordPress website.

Get Our Free Ultimate Guide to Coding for Beginners

Get Our Free Ultimate Guide to Coding for Beginners

Make a plan for learning the tech skills you need to land a new job with this 60+ page FREE ebook!

Your email address will not be published.

Cancel

14 comments

  1. express vpn key 2018 Replied

    It’s really a great and helpful piece of information. I’m glad that you shared this useful info with us. Please keep us informed like this. Thanks for sharing.

  2. abbyy finereader 14 lisans dosyası Replied

    I simply desired to appreciate you all over again. I’m not certain the things that I could possibly have followed in the absence of these recommendations shared by you relating to such question. It has been a difficult problem in my opinion, however , encountering a skilled tactic you solved it took me to jump with contentment. I’m just happy for this assistance and even pray you are aware of an amazing job that you’re getting into instructing other individuals using your websites. I am sure you have never come across all of us.

  3. new domain Replied

    I think your blog is good, maybe you can also refer to the contents of my new website.

  4. Christopher Replied

    I followed the same instruction to add a new page. From the backend it is created but I cannot view it from frontend

  5. dot to dot name writing Replied

    Your axiom is the biggest apex acnet.32essay.com/small-library/feature-write-ups.html of your essay. It is essentially congenial sentence that says what the connect with is about. In requital for benchmark, your argument sovereignty be Dogs are descended from wolves. You can efer.32essay.com/writing-desk/fire-heart-wallpaper.html then profit at near this as the fundamental predicate to invent your unreserved disquisition, and all of the different points all the scope auspices of summon payment to rope vanquish to this lone sheer thesis.

  6. Rein1004 Replied

    how do you get help via mightybell. how do you add your class

  7. Julie.Lynn Replied

    I’m confused about the file hierarchy in my text editor. Is the index.html file like the 3-binder and the work.html doc is nested inside the index.html file?

  8. singapoorboy Replied

    HI, I would just like to ask, where do you create documents/folder in creating a website? In your computer or in FTP?

    • Sara Regan Replied

      Hi there singapoorboy,
      They are talking about creating document/folders on your computer, via your Text Editor

  9. Jamie Replied

    Are we supposed to try this, or just read to understand how it works?

    • skillcrush Replied

      Hi, Jamie! You can just read this for now. Then, once you build and launch your own site, you can use these instructions to add pages to it.

  10. Jessica Maurer Replied

    I am a little confused about Notepad ++. I downloaded Notepad but when I tried to save my homepage, I got a message saying that I don’t have permission to save to this location. Should I be saving this to my documents? Also, can you preview your html in Notepad?

    • jessmelvi Replied

      I made a separate folder on my desktop and it worked for me. I just figued out how to see it as a website though:

      Save your text, but you have to save it as an HTML document type (the default is to save as a text file)

      then go to “run” at the top of the text editor and choose a browser to launch it in. (You have to actually have the browser for it to launch of course- I forgot i hadn’t downloaded Firefox onto my computer yet and was going mad for a second lol. ) I just posted that tip on Mightybell, too if you want to see if anyone has responded there.

      Best luck!

    • Rebecca Garcia Replied

      I would suggest downloading a text editor. Also like jessmelvi said do not forget to save your file as an .html or .css file or whatever programming langauge you are using so it is read correctly! Once you have it saved find the file from your Desktop and right click or Crl +click (for Mac) and choose open with (Chrome, Firefox, IE, etc.). It shoudl open your webpage in the browser and you can preview it.

      Once you have your own webpage set up you can save the files to correspond with your current page.

Want more articles like this?

Sign up to get the most recent tech news, tips and career advice.