How can I create custom content from html5, css3, javascript in wordpress? [closed]

2

I am working in a company that manages a wordpress template called "the 7" which includes something called "wp bakery page" which is a plugin with which you can create content for a web in a very easy way, style wix ... however for design and usability issues it is not the best tool, because it limits you graphically, we want to change the whole structure of the site, now I am doing the home of the site but in html, and the designer I spend it on photoshop, but the truth is that I am very new in wordpress, I have read about child-themes but I am not sure how to implement what I encoded from scratch with HTML5, css3 and javacript and create internal pages personalized in this way in wordpress, because also I do not understand very well the calls made by wordpress for the structure of the documents and that when same happens to wordpress, it can be personalizable from the administrator panel.

Where to start?

    
asked by Brenda Meneses Alvarez 04.01.2018 в 01:56
source

2 answers

2

I understand you I had these same doubts a short time ago and I give you a summary that is what I use every time I make a theme for wordpress:

Inside wordpress there is a folder called "wp-content" in it creates a folder with the name of your theme.

Now in your folder create 2 files for your new theme: index.php and style.css.

Inside style.css indicate the name of your topic and data between / * * /, something like:

/*
    Theme Name: Nombre de tema
    Theme URI:
    Author: Tu Nombre
    Description: Descripción
    Version:1.0
    Licence: GNU General Public Licence o Later
    Tags: Tag
*/

That's the basics to start a topic. Then there is a structure of WordPress better known as the hierarchy of topics that is jumping between files depending on how you think and call, here is information:

link

I also leave the loop:

link

Understanding the hierarchy of topics everything will be easier, going on to an example of how I work after creating the index.php as well as the style.css step to create:

header.php where I include the HTML5 header tags and with PHP:

<?php wp_head(); ?>

footer.php where I include the HTML5 footer tags and PHP:

<?php wp_footer(); ?>

index.php where I include the header and the footer:

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

However, this does not mean that index.php will be the first page that WordPress will show.

When you create your first WordPress page from the administrator indicating that it is your homepage wordpress, you get the "start" slug and look for a file called front-page.php so you must create that file and get the content that you entered from the administrator, in the following way:

<?php
get_header();
?>

<?php while (have_posts()): the_post();// traigo el contenido de la página desde la BaseDeDatos
 ?>

<?php the_title();?></h2> // el título que indicaste en el administrador

<?php the_content(); ?>// el contenido


<?php endwhile; ?>

<?php get_footer(); ?>

Of course you can include HTML5 tags for the format.

The topic hierarchy continues and if you are no longer on the homepage, look for the next file that is page.php which basically contains the same as front-page.php strong> with the difference that this loads the information from any other page that is not home or has the "start" slug.

Page.php is very important since it applies to all pages except the main or the start page.

This way you can create each of the pages you need from your administrator and take all the structure that you indicate in page.php but if a page is going to have another format different from the one indicated in page.php you can create a file with the name you need for example if the contact section will be different you have to create: "contact-page.php" and at the beginning indicate its name:

<?php
/*
Template Name: Contacto Template

*/
?>

Make the loop as in page.php and add the structure you need differently to the other pages.

This is the most basic and what I do, at the beginning it is intimidating but little by little it becomes routine and you begin to make your widgets and plugins.

I recommend you look for tutorials on youtube or udemy, in particular I recommend:

link

link

Greetings!

    
answered by 04.01.2018 / 09:23
source
3

You have to create a Wordpress template. A basic Wordpress theme has the following 4 basic files:

header.php (Desde el doctype hasta el final del header de tu sitio)
index.php (Desde el final del header de tu sitio hasta el final del contenido de tu sitio)
footer.php (El footer del sitio)
style.css (Lo principal que tiene que contener es los detalles del tema)

You can use the code that you already wrote in an html to make those files. You just have to change some things to make it work with Wordpress.

Example of header.php

<!Doctype html>
<html>
<head>
  <title><?php bloginfo('name'); ?></title>
  <?php wp_head(); ?>
</head>
<header id="header-principal">
  <img src="<?php echo get_template_directory(); ?>/assets/img/logo.png" alt="Logo">
</header>

One of the differences is, in this case, the src attribute of the tag. To work in Wordpress you need to use some function to get the absolute path to the template, and then give the path to the image inside the template folder.

You have to learn to use the classes and functions of wordpress to be able to make your template dynamic. (Upload your posts, images, your menus, etc). I recommend reading and doing tests with the wordpress codex. link

    
answered by 04.01.2018 в 03:42