A child theme is a good choice.
To answer your questions:
“I would like for the person taking over the site later to be able to revert it back if necessary.”
They can easily revert to the current theme — simply select it as the theme for the site, and it will appear. It’s forgiving that way.
Crash Course In Child Themes:
Child themes are built on their parents. Basically, when you set up a child theme, everything in the child theme is the same as the parent theme unless you say otherwise.
How it works is, when you go to a page/post, WordPress checks to see if the page/post file is in the child theme directory. If it’s not there, it goes to the parent directory and uses that one.
To make a change in a child theme, all you do is copy the file you want to change from the parent directory to the child directory. Make the changes, and it should work.
See: https://codex.www.ads-software.com/Child_Themes#Template_Files
It’s also good to get your head around the files you can change.
See: https://developer.www.ads-software.com/themes/basics/template-hierarchy/
Questions:
“Is it possible to change the order of content on each page only in the child theme?”
Yes. You would probably create a new page.php file for your child theme. Copy it from the parent theme to the child theme, then make the changes you want.
“Should I just add in the new id’s and classes and leave the old ones for the parent theme, or should I just change the ids and classes for the new child theme?”
IMHO, I would leave the old ones. You can re-define the styles in your child style sheet, that may do it. If you need to add more classes for the new look, then make the changes.
Remember, you are building on the parent theme and if you want to be able to roll the site back to the parent theme, you’ll need the old classes.
” Also, will there be a separate style.css file for the child theme, or do I add it to the style.css currently being used?”
There will be a separate style sheet for the child theme. You would put any changes in there you want.
For example:
In the parent:
.ClassA{
font-size: 10px;
}
In the child
.ClassA{
font-size: 12px;
}
The font size would be 12px.
Note: The child style sheet should only contain the style you want to different from the parent. If you’re ok with .ClassB in the parent, no need to change it in the child style sheet.
Important! There can be a bit of a ‘gotcha’ in how style sheets are loaded. The child style sheet should be loaded after the parent so its styles are used. If it’s not, the example above may have ClassA as 10px.
In the Child Theme instructions, it tells you how to handle it.
https://codex.www.ads-software.com/Child_Themes#How_to_Create_a_Child_Theme
Look for it under “Your child theme’s stylesheet will usually be loaded automatically. If it is not, ….”
“is there a way to do all of this in wordpress while keeping the current site live? Particularly, if I have to change the content for each page?”
In theory, yes. You could develop the child theme and switch it back to the parent theme when you’re done working on it. If you keep the original id’s and classes, it would work, and it would give you a better sense of how the site will behave if you do go back to the parent.
Remember, if there is no class instructions, the browser ignores it. That means if you have .ClassB in the child theme, but not defined in the parent, no damage done.
It really is a judgement call, it might be ok, but it might be a headache. IMHO, try it, if it’s a fight then develop the child theme off line.