msouthon

I thought it might be helpful to set out the exact steps I took to create a copy of the live WP site on my local machine. The process was unsuccessful so if anyone can see something I did wrong or something I omitted to do, I would be very grateful.

Thanks in advance!

The steps I took to transfer a live WP site to a local server

STEP 1:

Downloaded the entire ‘wordpress’ folder from the live site to my desktop (this includes sub-folders named ‘images’, ‘wp-admin’, ‘wp-content’, and ‘wp-inlcudes’)

STEP 2:

Downloaded the database from the live site to my desktop

STEP 3:

Opened the downloaded sql database and did a search and replace on the following:

=> find and replace: ‘www.wpm-temp.com’

=> with: ‘localhost:8888’

STEP 4:

Opened MAMP and went to ‘Preferences’ => ‘Web Server’ and set the ‘Document Root’ as the folder on my desktop where I saved the wordpress directory from the live site.

STEP 5:

Started the MAMP server and went to the ‘Start Page’ and clicked on ‘Tools’ => ‘phpMyAdmin’.

In ‘phpMyAdmin’ created a new database (‘newgbdatabase’) and then imported into that newly created database the contents of the downloaded database.

STEP 6:

Opened wpconfig.php and changed the database name, the user name and the password, thus:

// ** MySQL settings - You can get this info from your web host ** //
/** The name of the database for WordPress */
define('DB_NAME', 'newgbdatabase');

/** MySQL database username */
define('DB_USER', 'root');

/** MySQL database password */
define('DB_PASSWORD', 'root');

STEP 7:

Entered this address in the browser:

https://localhost:8888/

and pressed ‘Return’

STEP 8:

Received the following error message:

“This webpage is not available”

Yes, I use MAMP to create a site and then upload it to the server.

I solved the above problem by adding a margin-left: -20px; to the #main div and the #header div. Probably not the right way to do it but it worked. Thanks again for all your help!

Thanks for that. I uploaded that background image as thinBG.png. I’m not sure if it has changed anything. One thing that did help with the background image was including these two div tags from the original WP template:

<div id="container">

			<div id="content" role="main">

I’m stumped by another issue at the moment. I created a 3-column layout using this HTML:

<!-- Three Column Layout -->

         <div id="content-1">

	 This is the 1st column	

	</div><!-- #content-1 -->

	<div id="content-2">

	<div id="content-2-1">

       This is the 2nd column

        </div><!-- #content-2-1 -->

        <div id="content-2-2">

        This is the 3rd column

        </div><!-- content-2-2 --> 

       </div><!-- #content-2 -->

together with this CSS:

#content-1 {
    float:left;
    width:25%;
    background: red;
}

	#content-2 {
    float:right;
    width:65%;
} 

   #content-2-1 {
    float:left;
    width:80%;
    background: yellow;
}
#content-2-2 {
    float:right;
    width:20%;
    background: green;
}

As you can see, I colour-coded the divs to help identify what is going on:

https://wpm-temp.com/beaches

The problem is that although the combined value of the two ‘parent’ columns (content-1 and content-2) is 90% (25% and 65%) the 3-column layout seems to be restricted to about 70% of the screen.

The white area is the ‘container’ div. Somehow I need to specify that I want the 3-column layout to take up 90% of the container div. That’s where I am stuck.

If you have any suggestions I would be very grateful.

Thanks!

Actually, I was wrong, the grey margin was still there (I hadn’t scrolled far enough right).

I implemented your solution above but now I have a white vertical band running along the right hand side. Any suggestions?

Thanks very much.

Thanks so much for that, I just removed that ‘background-color: #fff;’ from the id wrapper and the grey margin on right-hand side of screen disappeared.

Now that I know why the css gradient wasn’t working I’ll have another go at it.

Thanks again!

Thanks very much for those 2 solutions!

I fixed up the horizontal nav menu: the ‘auto’ setting worked fine.

I tried doing a CSS gradient but got some weird results (it started about half way down the page, leaving the top half of page blank).

So I re-saved the jpeg in Photoshop, making sure there are no border lines. I got rid of the two white lines but now I have a grey margin on the right-hand side of the screen:

https://www.wpm-temp.com

I would be very grateful if you know how I can get rid of that margin.

Thanks again!
Michael

Thanks for your response. I have just re-uploaded the functions.php file to the web host and the problem has corrected itself.

Seasons Greetings
Michael

I found the problem! As you suggested it was in the ‘Theme Options’. Some time ago I had entered that snippet of css in the ‘Custom CSS’ field of the theme’s ‘Styling Options’. I’ve now removed it and the font-size is responding properly. Thank you so much for your help and your time!

I’m trying to find that snippet of code

body { font-size: 15px; }

Would you be able to explain to me which template file it is in?

Thanks.

Thanks, when you say <head> section, is that the header.php?

sorry about that, here is the link:

https://www.wpmediadesign.com

Thanks

I created a new local installation of my site with a new (blank) database and created a brand new child theme folder for twenty ten. I noticed that as soon as I dropped my old child-theme index.php into the new child-theme folder, the header disappeared from the blog page. So that pointed to the index.php being the problem. So then I compared the index.php that comes with the 2010 theme with my customized index.php and noticed that the latter was missing the ‘get header’ code:

<?php
/**
 * Main template file
 *
 * This is the most generic template file in a WordPress theme
 * and one of the two required files for a theme (the other being style.css).
 * It is used to display a page when nothing more specific matches a query.
 * E.g., it puts together the home page when no home.php file exists.
 * Learn more: https://codex.www.ads-software.com/Template_Hierarchy
 *
 * @package WordPress
 * @subpackage Twenty_Ten
 * @since Twenty Ten 1.0
 */

?>

		<div id="container">
			<div id="content" role="main">

			<?php
			/*
			 * Run the loop to output the posts.
			 * If you want to overload this in a child theme then include a file
			 * called loop-index.php and that will be used instead.
			 */
			 get_template_part( 'loop', 'index' );
			?>
			</div><!-- #content -->
		</div><!-- #container -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

Have re-inserted the ‘get-header’ code into my child-theme index.php and all is working fine now.

Blog page appears as it should (with header and footer):
https://www.cairnsaustraliatravelguide.com/catg-blog

Thanks for your time with this! Very happy that I’ve found the cause of the problem! ??

regards

I deactivated all my plugins but there was no change: the blog page continued to have no header.

Then I activated the parent-theme (Twenty Ten) instead of the customised child-theme and the header appeared on the blog page.

So in the process of customising the template files in my child-theme, I must have done something to affect the header in the blog page. My task now is to find which of the template files is the one that is causing the header to disappear on the blog page. These are my child-theme files:

editor-style-shared.css
editor-style.css
footer.php
functions.php
header.php
index.php
page-grid.php
page.php
rtl.css
style.css

One idea I had was to remove each file from the child-theme, one at a time, and see if the header returns to the blog page…

Any suggestions?

Thanks

These are the steps I took:

1. created a page called ‘new-blog’

2. set it to ‘Default Template’ in ‘Page Attributes’

3. Published the page, ‘new-blog’

4. In Settings => Reading, I set the ‘Posts Page’ to ‘new-blog’

Thanks