Hiding file ext. in the url's

For sometime I have been trying to figure out how the designers hide the url’s on the web pages.

       </div><!-- close logo span -->
                <div class="col-md-12 kad-header-right">
           <nav id="nav-main" class="clearfix" role="navigation">
              <ul id="menu-main-menu" class="sf-menu"><li  class="menu-our-products sf-dropdown menu-item-210"><a>Our Products</a>
<ul class="sf-dropdown-menu">
	<li  class="menu-standard-barn-kit menu-item-87"><a href="http://barnkings.com/our_products">Standard Barn Kit</a></li>

</ul>

This is a snipet of code taken from http://barnkings.com As you can see the code is calling the pages to the web but they are not using the standard format to do it.

Does anyone know how they are storing the files to call them, or a course sitepoint has that i could take to learn how to do it?

You mean the <a> element with no href attribute?
<a>Our Products</a> is not a link, it’s just a menu header, the drop-down menus have href attributes as normal.

Or do you mean the lack of an extension, like our_products.htm or .php ?
That is easily done by having a folder named after the page like http://barnkings.com/our_products/
Each folder will contain its own index.htm or whatever extension, but the urls don’t name the index file, so you don’t see it, because index is the default page in the folder.

I believe this can be done with .htaccess

hey samA74 when you hover our products the drop down reveals 4 pages.

The first page is standard barn kits and when you click that link you go to the standard barn kits page
but in tha address bar it says you are on the barnkings.com/ our products page.

The next one is the barn styles and when you click on it you go to http://barnkings.com/our_products/barn-styles.

You do not see the ourproducts.html for the first example.

You do not see the barnstyles.html in the second example.

What is really confusing is how do you pull up a web page called our_products.html and have it show as barnkings.com/ our products in the address bar?

If it’s using the method I mentioned, they are not files, but folders with that name.
barn-styles will be a sub folder of our_products and each folder contains a file index.html or similar, that’s the file you are looking at.

You can prove that index.html, or index.htm is being used by adding that to the end of the URL - if you get the same page coming up, then that’s the hidden file name they’re using. It’s done as a part of the web server config, by telling it to automatically display a file of that name if it finds one in the folder you’ve pointed at.

1 Like

Good point. For index.htm and index.html I get a 404, but for index.php I get a redirect to the page without the filename shown.

1 Like

I have this line in htaccess:-

DirectoryIndex index.php

They must have something else that gives the redirect for that page.

1 Like

That was the the other option… :stuck_out_tongue:

Yeah, you’d commonly find a file like that being pulled many times to build the requested page based on where it was called from.

OK I have tried all this now can someone show an example of what you are talking about because none of it works for me.
<li class="menu-exterior-photos menu-item-98"><a href="http://barnkings.com/photo-gallery/exterior-photos">Exterior Photos</a></li>

In the line of code above there is a class, a menu item, herf is pointing to barnkings.com/photogallery/exterior-photos| it is calling Exterior Photos there is no html or php in the code anywhere.

Can someone post the complete file linking to show how this works?

For some reason i am having trouble getting my head around this.

As above those are a few ways of doing but you can also do a few others with php and .htaccess.

For an earlier site i made rather than having www.example.com/index.php?section=thispage&section2=thatpage
I used .htaccess to assume that the page is .php even without the .php so i got to this

www.example/index?section=thispage&section2=thatpage

But that is still messy so using a bit of php i told the page to assume position 1 variable was ‘section’ and position 2 variable was ‘section2’. A bit of .htaccess gets it to

www.example.com/index/thispage/thatpage

I can then run a query to pull back the correct page from the database depending on what the section and section2 variables are.

A more recent site i built does it slightly differently but again i used php and .htaccess to tell it to completely miss out the ‘index.php’ part but still use it in the background so something like

www.example.com/page

would actually be

www.example.com/index.php?section=page

The index.php is used for the query and can pull information back based on what is in the url variables (even though they don’t look like variables), which is what most of the cms’s out there do i believe.

so an example breaking down your url (depending on how your site is actually built) could be

www.barnkings.com/photogallery/exterior-photos

is actually something like

www.barnkings.com/index.php?var=photogallery&var2=exterior-photos

when the server is asked for the page what it is actually doing is saying 'what is $var … it’s 'photogallery… does that match what is in the database… yes and the entry in the database is a link to a file include so we include the gallery script… the gallery script then says is $var2 set?.. yes it’s exterior-photos…does it match the categories in the photogallery database?..yes… so we return the list of photos into the gallery script and output the page.

if that makes sense

I presume there will exist a file:-
http://barnkings.com/photo-gallery/exterior-photos/index.php
and in the htaccess, the line:-
DirectoryIndex index.php
So when you follow a link to the directory: http://barnkings.com/photo-gallery/exterior-photos
You are seeing that file, though you don’t see its name, because it is Directory Index file, as defined in htaccess.

Ah i’ve just had a look at the source code of the site and there seems to be a few tell-tale signs that it is a wordpress site. Wordpress is a content management system using php and a mysql database. So as i posted most of your content or ‘pages’ will be in a database and won’t be actually .html pages in a folder structure.

they will be generated from the database and various scripts called together before the page is output. There won’t be a folder called ‘exterior-photos’ and subsequently there won’t be an ‘index.php’ page

‘exterior-photos’ will be a variable that tells a query what to do and which scripts to put together.

Meaning there will be an index.php file at the root containing the script which controls what content should be pulled from the DB and shown for whatever url.
Though I think in WP the index just includes another script that does the work, and I don’t think WP does use folders either.

yep but not in a folder type structure with html pages neatly arranged. I think (might be wrong) the OP is expecting to find an actual html type page with the content on it, in a folder of a corresponding name. Whereas the actual index.php file will be a page of code pulling in code from other files and data tables. Looking at the index.php won’t help if the OP wants to add a new page or sub-directory as that is best managed through the admin interface.

sometimes i’d rather just an actual html page in a folder :slight_smile:

I’m not a WP user, but there is a site I have access to which uses it. I was looking at the file/folder structure.
There is an index.php in the root, but that does nothing bur require another php file, which in turn requires some more files, ect.
@tofugly why are you asking? Is it just curiosity, or is there something you want to do?

I wish I had noticed this was about WordPress sooner.

What’s being looked for is “permalinks”

https://codex.wordpress.org/Using_Permalinks

The default is “Ugly”

The default looks like

http://example.com/?p=N

WordPress can do the heavy lifting for you, the hardest part is deciding which of the many different formats you want the URLs to look like

mod_rewrite: “Pretty Permalinks”

Using mod_rewrite or lighttpd you can produce much nicer permalinks (see Pretty Permalinks). There are many different formats, but the most common, and most versatile looks like

http://example.com/2012/post-name/

or

http://example.com/2012/12/30/post-name

Or you might prefer

PATHINFO: “Almost Pretty”

PATHINFO permalinks look very much like mod_rewrite permalinks but for one exception: they have /index.php inserted before them, like so:

http://example.com/index.php/yyyy/mm/dd/post-name/

I am trying to figure out how the web pages are being pulled up in the browser and not showing the file extensions, using code like that in the barnkings.com site.

I want to use it in one of the sites I am presently working on.

Maybe I don’t understand enough about the file system to figure out how it is being done.

I think I will go ahead and use the standard version.

<a href="index.html>Show Page

Sure looks a lot simpler.