Wordpress website renders differently on devices apart from the local server - php

I am using my laptop as a test environment for a wordpress website before I move it to an online server. I have this setup with a xampp sever running on the local machine. Wordpress is installed and running a theme which I have modified somewhat. When I navigate to the website from the local machine by going to 'localhost', the website displays correctly, however if I navigate to the website from another device whether it may be a computer, phone or tablet, the website seems to exclude css styling and only displays plain html. Any insights would be appreciated.
I know that with some browsers, sites in your local intranet except localhost are rendered differently. I am not sure whether this is the issue here. I am using Chrome Version 42.0.2311.135 dev-m

When you're accessing the site on another machine, open up the developer tools in your browser and see where the link to your CSS is pointing at.
It sounds like that CSS URL is hard-coded to be pointing at localhost (which would explain why it only works on your machine). It could also be the case that you have set your site's domain to be localhost in Wordpress which may be using that to render the URLs.
Double check your Wordpress settings, and also your theme's code.

Related

access wordpress site from another machine

I'am new to the WordPress and I created WordPress website and configure it within the Wamp Server. The site displays all it's contains locally correctly. Now I want to access that website from the another machine within same network but it did not display all the contents correctly. it displays only the text. no images and the applied theme is not displays. I turn off the firewall and change the Apache configuration file (httpd.config) as follows. but it also didn't work properly. please help me.
Order allow, deny
Allow from all
The problem is that you specify during install that the hostname of the site is "localhost". Unofrtunately when you connect from another computer the link to "localhost" refers to the pc you are connecting from and since in this pc there isn't any server runnin,g you see only the text and not the images or the css.
The solution is to modify the wp-config.php wordpress file and change this from:
define('DB_HOST', 'localhost');
to:
define('DB_HOST', '192.168.0.4');
The problem is with URL of the site. You need to update the URL in database and replace localhost with IP of your machine using phpmyadmin and then that site will be accessible from other machines in your network. Please try this and it will solve your problem.
This is a WordPress oddity. When you install WP on localhost, or anywhere, it stores the url used in the install in its database. It then uses this url internally in its code to build links etc.
So when you come to run this site from another PC, things like image links will be built with the url localhost or localhost/wordpress.
Now when you run this from another PC using a different URL like 192.168.0.4/wordpress localhost will still appear in the links and of course there is no localhost on the client PC. So the links dont work. Its a bit like you have moved your site to a new url, but WP does not know about it.
Read this post on the WP Codex to work out what you need to so to amend the urls in the database. OF course this means you wont be able to use localhost anymore on the WAMPServer machine either.

Azure VM does not serve external website

I spun up a Windows 2012 R2 Datacenter VM.
Endpoints have ports 21,80,443 successfully added to the dashboard.
Installed Wordpress/PHP on the VM using the Web Platform Installer.
Wordpress site works fine using localhost.
Trying to hit the DNS (mysite.cloudapp.net) or the public IP, shows just the generated version of the site below. Clicking links results in an "unable to connect" error.
Anyone know what I might be doing wrong?
By default, when you finish installing wordpress, the address URL is set to
http:/localhost/wordpress
When you browse your site with DNS, the resources file urls are still referring to like http://localhost/......
So, we need to sign in wordpress admin portal in your VM, click “setting”=>”general”, set “WordPress Address (URL)” and “Site Address (URL)” to http://<your_vm_name>.cloudapp.net/wordpress, and save changes.
If you have any further concern, please feel free to let me know.
wordpress is normally url based, make sure it's configured for wildcard or the cloudapp.net domain.
So one thing you can do is see if you can log into /WP-admin and check the home and url links under Settings>General to see if they match site.cloudapp.net. If they do you might also want to check under your wordpress's theme files in functions.php and add the following lines to the top after <?php
update_option('siteurl','http://example.com');
update_option('home','http://example.com');

Use MAMP to open website on another pc - only see db content

I’m trying to make access to my MAMP localhost from my mobile phone and other Windows PC. I’m currently using a Mac.
While I can see the database content but the website doesn’t render as usual (no images, stylesheet, etc…).
Therefore I assume the other PC can access the database but can’t use the files. Maybe the PHP files are not processed?
Does anyone have a suggestion on what could be the cause and how to fix it?
However I can see the database content but the website doesn't render
as usual (no images, stylesheet, etc)
Does your site on the MAMP install use hardcoded URLs for CSS, images & JavaScript? Something like this:
http://localhost/images/a_great_image.png
If so, when a remote host accesses your site, they will not be able to see the content on URLs like that since they will be pointing to localhost and localhost is an address directly connected to the local machine. Meaning that any machine will only see localhost as their actual machine; never a remote machine. It’s a loopback hostname for testing & restricted local access.
The two solutions you have is to do the following:
Change the localhost address to be the IP address of your computer on the network. So if your computer is reached via the IP 10.0.1.3, then the URL would be: http://10.0.1.3/images/a_great_image.png.
Change the URLs to be relative URLs such as /images/a_great_image.png and maybe use base tag like this <base href="http://10.0.1.3/" target="_blank"> on each page. That way all your links in URLs are relative, but the base is set once & is always http://10.0.1.3/.

Creating a test environment for an existing website

So I have an employer who currently operated their website with no testing server whatsoever. All updates to the site are "tested" live in front of the whole world. I don't need to hear about why that's dangerous... I know it is. In fact if this continues for much longer I'm going to develop an ulcer.
I am trying to place a working copy of the svn of the site on my MB pro for testing purposes. The site is all PHP and MySQL so my plan is to install MAMP and run the test copy on localhost.
My employer is worried that by hosting a copy of the site on my laptop I will interfere with the operation of the live site. Is this possible? Is there any way that my hosting a copy of the site on localhost will interfere with the operations of the live website (hosted on a remote server)? Are there dangers in setting up a localhost copy?
Apologies if this is out of scope, hopefully this will be useful to others.
It depends on the site. When I make a site and the database is hosted on localhost / the same server as the web-server, no.
But I have noticed that if you use for example WordPress, you are testing on your local copy one minute and are on the live site the next as the url seems to be hard-coded in the generated pages (in the case of WordPress a setting in the database).
So:
Always make sure the database connection is to your local database (ideally that is just in one place and you don't have to change anything if the live site uses localhost as well)
Look out for links / settings / rewrites that direct you to the live site from your local site.

No CSS/formatting on wordpress blog from external computers

I'm trying to set up a wordpress blog hosted from my computer using this tutorial. When I visit the site on the computer it's hosted on, via localhost or the IP of the computer, the site looks fine, but when I visit it from another computer it looks like this.
All Wordpress resources (stylesheets and images at least) use Wordpress' URL configuration. You can find it as the 3rd option down in the General Configuration page of your Admin. This is due to the way that themes are to be programmed and create the header of the blog using the bloginfo function that uses those configuration values to generate the rest of them
What is probably happening is that such URL is using either localhost or 127.0.0.1. If that is the case, when accessing the blog from your own PC it would show fine as both do resolve to the local machine. If you access it from an external PC, they would not resolve to the PC that is serving Wordpress but also to the local PC - which is not able to provide them.

Categories