• Hi, we are new to WordPress and uploaded custom html pages with their own css and JavaScript through tan FTP client. We created a dev environment for these and then wanted to add WordPress plugins to the already existing pages. However, In the dashboard of our dev environment, we can’t see our pages under “pages” and was wondering if there was a way to edit our custom pages through the dashboard. Thanks in advance.

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Moderator bcworkz

    (@bcworkz)

    Probably not through the dashboard. You probably need to manipulate the imported data through phpMyAdmin or by writing appropriate UPDATE queries. Do the imported pages show up anywhere in the admin area? Under posts perhaps?

    If the imported data is otherwise correct, the post_type field needs to be changed to “page”. Pages also have specific post meta data that you should implement to have fully valid page post types. Each page should have a “_wp_page_template” field designating the path to the page’s template. The value stored is default when the theme’s normal page.php template is to be used. Otherwise the value is the template file to use relative to the theme’s folder. If everything is the default, you can get away without the “_wp_page_template” field.

    Thread Starter jamessullivan77

    (@jamessullivan77)

    @bcworkz thanks for the response, we didn’t use a theme, we custom coded the pages, is there an approach to this method? We are looking into customizing the child.css on an existing template since we have not been able to find an answer.

    Moderator bcworkz

    (@bcworkz)

    I think you are saying these pages are not part of WP at all, they are individual files? That would explain why they don’t show up in the dashboard ?? That’s not a real problem, plenty of sites are “hybrid” static HTML and CMS (WP and similar platforms) managed. It does mean that WP plugins cannot be applied to such pages. Furthermore, such sites tend to be difficult to maintain. For those reasons and more, I think it’s worth importing these pages into WP. Which is what you are asking how to do. I’m getting to that ??

    Exactly what you would do depends on the page layout and how much of it you want to be styled like the WP theme. Generally, designers will let WP generate the header, footer, and nav menus. The body of the page is the part that is imported into WP. It’s possible to let the page’s static components be used instead of the WP versions, but then you start making the site more difficult to maintain, partly defeating the reason to use CMS.

    Before doing anything, it might be a good idea to create a child theme to contain any custom work so it is protected from theme updates. If the custom CSS is minimal, this may not be necessary. If you end up with any custom PHP, JS, or templates, you need a child theme.

    The CSS for the pages can be added to the child theme’s style.css page. You only need CSS of the page body. Header and footer appearance is handled by the WP theme. If each page has its own unique CSS, that can remain as part of the page body’s inline styles. Any styling that’s common to the pages should go on the child CSS.

    Similar for JS script. Unique to page JS can be inline script, but anything common should be in an external JS file that’s part of the child theme. To cause external JS files to be loaded on a page, use the WP PHP function wp_enqueue_script(). The required action callback containing this call can be placed on the child theme functions.php file. There is a related wp_register_script(() function. You don’t need to use it unless there’s reason to refer to your enqueued script in other functions, such as specifying it as a dependency.

    For each page you want to import into WP, in the WP admin area, start a new page and assign a title. From the original page’s HTML, extract the portion representing the body’s HTML content and paste it into the content editor using the text tab view. Include any inline script and styles unique to the page. If the chosen theme offers several page templates, select one that offers a full width layout, unless the page’s layout is setup to include a sidebar. If a sidebar is desired, use a page template that includes one. Preview the page.

    There will likely be adjustments needed to have the page appear correctly in WP. Go ahead and make them. When all looks good, publish the page. Adjust references to the old page to utilize the new page’s permalink. The original source HTML page can then be archived, it will no longer be used.

    The page is now part of WP and plugins can alter pages like any other WP pages. You can add shortcodes to the content and add widgets to any widget areas.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Editing Custom HTML pages in development dashboard.’ is closed to new replies.