• I am pretty proficient in HTML and CSS, and I have a very, very basic understanding of php.
    However, I am completely new to wordpress, and I am not sure if I am doing things correctly. It may be too late to salvage what I have done so far, but here’s to hoping.

    I have a website that has been on wordpress since 2012. I copied this website, page by page, into my sublime text editor using chrome developer tools. I then stripped the pages of all div’s, classes, and id’s. I then removed all unnecessary code from the style.css file. I then added new div’s, classes, and id’s, and I redesigned each page.

    Basically I moved our website onto my computer, striped the styling, and then restyled.
    Each page has its own custom styling, and each page has all of its content and images already in the HTML.

    Now, I am ready to move this site back onto wordpress. What would be the best way to go about doing so? I have researched child themes some, but in this case I have not built a template, I have built the entire site including content.

Viewing 3 replies - 1 through 3 (of 3 total)
  • Lisa

    (@workingwebsites)

    Hi blakeleyk,

    First of all, a quick big picture view of WordPress.
    It’s a content management system that stores its page content in a database.
    When it displays a page, it pulls the content of the page out of the database, checks to see what theme (style etc.) you are using and applies the style sheet etc. for your site.

    That means the content always stays the same, but the theme can change. It’s a beautiful thing!

    What that means to you is, all you need is a new theme, and there is no lack of them. Also, you don’t have to change any of your content, it’s already in there.

    Note: WordPress sites are different than conventional HTML sites where each page is a file. A WordPress site looks like it has a file per page,but technically it’s not. WordPress is different head space, but once you get the hang of it, it is easier than the HTML file set up.

    So, first step, select a theme and load it on your site. Don’t worry about the content, it looks after itself.

    If you already have a look in mind, find a template that is pretty close. You can tweak it after.
    See: https://codex.www.ads-software.com/Using_Themes

    Once you have the theme on your site, it may not be a perfect fit.
    Many themes allow you to change colours, fonts etc. Usually you can set fonts etc. in the Dashboard, under ‘Appearance’ -> ‘Customize’

    If the theme still isn’t quite right, use a Child Theme.
    Important! Though it’s tempting just to change the theme you have, don’t do it! Sooner or later that theme will be updated and it could wipe out all your changes. Child Themes are your friends.

    Child Theme’s are pretty straightforward, they really come down to 2 files. You can do a lot just by having your own style sheet, you may not need the other features.
    See: https://codex.www.ads-software.com/Child_Themes

    I hope this points you in the right direction.

    Thread Starter blakeleyk

    (@blakeleyk)

    Thanks for the response! It is slowly starting to make sense.

    The website that I am redesigning has already been on WordPress, and it already has a theme.

    I think the header and footer are great, so the only changes I will make to those sections will be a hamburger menu on mobile for the header. There are also a number of pages that do not need to be redesigned.

    However, what is changing is the design of the body of a few pages. I am thinking a child theme will be the best option for this, as the design is moving from columns to rows and things will move around a good bit, but I would like for the person taking over the site later to be able to revert it back if necessary.

    The issues I am running into now are:

    1) I have successfully found where to edit, change, and add content. However, the redesign requires that I change the order of content on a page. For example, old site has a ul at the bottom of the page, underneath an image. With the redesign, the ul will be split into two ul’s, with half going above the image. Is it possible to change the order of content on each page only in the child theme? I would want the original theme to look exactly the same as it has been. (Also, I would want to be able to change it back in case changing the order of content hurts SEO)

    2) The id’s and class’s are going to completely change. 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? 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?

    3) Finally, 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?

    Lisa

    (@workingwebsites)

    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.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Complete Redesign Locally, Now Lost’ is closed to new replies.