Support » Developing with WordPress » How to convert a multi-file HTML template to WordPress themee

  • I have downloaded a premium HTML template from Envato with lots of CSS and animations, (https://elements.envato.com/sambat-creative-digital-portfolio-html-template-GNPE26D) and I want to convert that into a WordPress theme so I can download plugins on top of it, and to make it user friendly to edit the pages. I have followed several courses and tutorials on how to make a custom WordPress theme, but they all seem to cover a simple blog site which can be easily edited from the WordPress backend.

    I understand the principles of making an own theme (all the setup files etc.) and I have mad the dynamic menu, logo, and titles working but how do I keep the contents of each page in the nice looking graphics instead of just using the_content(); ?

    Please let me know if you need any more information.

Viewing 13 replies - 1 through 13 (of 13 total)
  • Content is provided by whatever editor that you’re using, combined with CSS styles from your theme. Using the_content() is just how you tell WordPress to output that content into the page template.

    There’s literally 1,000’s of ways to format content for a site, and it’s all going to depend on how your theme is set up, and what you want the content to look like. Using things like a ‘Group’ in the gutenberg editor, or some custom shrotcodes in the classic editor, can help to break up different areas, but again, that’s all going ot be up to how you code your CSS to style it the right way.

    Thread Starter ylakdime

    (@ylakdime)

    @catacaustic thanks for your reply, it puts me in the right direction. So with groups I can assign each block to a different place in the page.php file right? So how do I do that after creating a new Group? Is there something else than the_content() to display that second group into another area within the HTML template?

    You’ve got it wrong. A ‘Group’ is just a group of other blocks. They go in order, just like other blocks. You have one group block with waht ever other blocks you need inside it, then another group block with what ever blocks you want inside it, and so on until you’ve built your page. Then in the template ifle you use the_content() to display it all.

    Thread Starter ylakdime

    (@ylakdime)

    @catacaustic but i want different blocks to be displayed at different areas. please have a look at the template mentioned ( http://esensifiksi.com/tf/sambat/dark/index.html ). For example I want some text which has different classes and css, to be displayed in the right hand side section with all corresponding links staying intact. Then I want the section ‘Projects from the Studio’ to include a gallery of that kind. And I want ‘view All Projects’ at the bottom to link to my page ‘Work’. Sorry please bear with me as i am quite a beginner with WP development

    Right hand side section? That template is jst one central column with what would be blocks (or group blocks) stacked on top of each other. The layout may have a bit to it, but you will still need to build everything there using blocks as part of the content.

    Thread Starter ylakdime

    (@ylakdime)

    @catacaustic can you have a brief look on Teamviewer please so it makes sense what I mean?

    Thread Starter ylakdime

    (@ylakdime)

    @catacaustic i would greatly appreciate that if you dont mind.

    Sorry, but no.

    Everyone here are volunteers, so there’s no “official” support staff as such.

    If you can’t build whats there with existing blocks, one good plugin that I’ve used with a lot of success is Genesis Custom Blocks. That will let you create your own block types, and set up how they display.

    Thread Starter ylakdime

    (@ylakdime)

    no problem. What i meant is for example I have this code in my template:

    <div class=”col-lg-5″>
    <div class=”abt-text”>
    <?php the_content(); ?> //here I want to display just one block.
    Explore more
    </div>
    </div>
    </div>

    and also:

    <div class="row">
                        <div class="col-md-12">
                            <a href="work.html" class="next-project centered text-center load-spiral">
                                <div class="col-md-12">
                                    <p>View</p>
                                    <h3> here I want to insert another text block </h3> //here i want to link to another page
                                </div>
                            </a>
                        </div>
                    </div>

    If I place the_content() somewhere , all the blocks just pop up under each other.

    That’s correct.

    You need to take what you’ve got there and turn each of those areas into separet different blocks, and then set those blocks up in your page content. Let each block take care of the HTML code around it instead of setting up that as part of your template.

    The reason for this is that you are probably not going to want that same template on every page/post/etc of your site. So you create various blocks that you can add as they are needed.

    Thread Starter ylakdime

    (@ylakdime)

    You mean I need to take that whole block HTML and click on ‘Edit as HTML’ on the block and insert it there? And then manually type the text I want in between the regarding tags?

    That’s wy I suggested Genesis Custom Blocks above. That lets you set up your own blocks with PHP templates that you can reuse throughout the site as you need to. It’s a whole lot easier.

    Thread Starter ylakdime

    (@ylakdime)

    Thank you I will look into that

Viewing 13 replies - 1 through 13 (of 13 total)
  • The topic ‘How to convert a multi-file HTML template to WordPress themee’ is closed to new replies.