Creating generic pages in Visual Studio - Outside of Wordpress

So when building websites, outside of Wordpress, using only Visual Studio code, how do I create generic page-templates?

When doing it through Wordpress this seems to be created with PHP. But how should I go about doing it outside of Wordpress, in Visual studio?

1 Like

Hey @O.w. I don’t know whether this is the way to do it, but you can create a template with dummy text and images and when you want to create a new page, you can copy the code of it and make necessary edits.
If you are talking about page parts (header, footer, sidebar, etc.) you can code them separately in another file (one file for header, one file for footer, etc.) and then use the PHP include function to include it in your pages. This is a good way because if you want to edit your header, for example, it will be updated everywhere.

Hi.

This sounds very good. Thanks

It works when I do it in W3schools. But when I do it in Visual studio code it does not work. I paste the include-string in my page. But nothing appears there.

Could this be because I am doing this in Visual Studio code, outside of Wordpress? Or do I have to create index.php, before the header.php works or something? Or why is no text showing up there.

1 Like

Hello there.

Could you be a bit more specific with what you are looking for? Perhaps with an example.

It sounds like what you are wanting is what is often called a view engine. This requires a template in a markdown language, which is populated through the use of something like JavaScript/Node, or PHP (many other languages can be used).

One view engine is used in the fCC curriculum - pug. It is discussed in the Advanced Node and Express section of the course.

Hope this helps

Hi @O.w. Have you created a separate file for header? Also, did you specify the file path correctly in the include function? Please share your code. Thanks.!

How are you running the PHP code? PHP is server-side. WAMP, MAMP, or LAMP stacks are often used for local dev (for WP specifically you can also use something like Local).

There are a lot of different templating languages it kind of depends on what programming language you want to use as well.

1 Like

This is what my code looks like in the page I am creating in Visual Sudio, which is called first_page.html:

<h1>Welcome to my home page!</h1>

<p>Some text.</p>

<?php include 'header.php';?>

<p>Some more text.</p>
1 Like

Now, in my header.php-file I have written this:

<div class="topmenu"> (In this section is a lot of code which is the same as the navigation bar's code at the homepage. On the homepage it works fine) </div> <br>

Are you sure that you have a local server installed on your computer? Then only you can write PHP code. Also, your first_page.html should be a PHP file and change the header.php to header.html if it doesn’t contain any PHP code.

I am trying to write out code in the comment above but it comes out as ordinary text(?) Not sure why :slight_smile:

1 Like

Whenever you’re writing code, do the following:

Hmm how do I include a header.html-file in the first_page.html? The same way as with a php-file? What should I replace this code with: <?php include 'header.php';?> when including a header.html-file?

1 Like

Seems like you don’t know PHP at all. Then use other alternatives like jQuery.

I am not sure if I have a local server :slight_smile: How do I know if I have one? :slight_smile:

I have tried this in Local flywheel when trying things in Wordpress coding before. And then this include-thing worked fine.

But now I am trying it outside of Wordpress in Visual Studio Code only.

1 Like

Yeah I am new to all of this. I only understand HTML and CSS kind of well.

How do I use JQuery for this?

And why does this work when I do it through Local flywheel-wordpress-coding? But not in Visual studio alone? Is that because the lack of a server or something?

Try this

I have no idea :slight_smile: How can I tell? (I am a noob to all this stuff) trying to build a website. It worked fine when I did this in every single page at the top navigation section. But I want to create a structure/template generic for all pages. So that I could just alter that one page for all of the rest to follow, if I need to change something.

I am unsure of the WAMP, MAMP, or LAMP stacks. because I don’t know what those are :slight_smile:

1 Like

First of all, you need to install a local server as PHP is a server-side language. I use XAMPP. When you install it, PHP is installed in your computer. If PHP is not installed in your computer, you can’t do this.
If you don’t understand PHP, then try using jQuery method. But, trust me, using PHP is good for this.

I want to to try that. I have Mac. Should I download XAMPP? Will it work automatically after that or do I need to create a pathway/connection or something?

1 Like

well, maybe go throught the whole freecodecamp curriculum, or something similar

if you don’t know this at all it will be difficult to do anything