How to edit the html code in wordpress theme - php

I have a wordpress blog and I want to customize it a bit. I know CSS and HTML but not php. from what I understood the php should call the html code, so if i could find the html code it will be easy for me to customize my blog.
The thing is, I can't find the html code. I looked at appearance --> editor and it is all php files and one css.
Someone has an idea how to edit the html code/find it ?
thanks

If you want to edit your wordpress theme html , css etc. Kindly follow the steps.
Always use a child theme
Before you start editing your WordPress theme create a child theme. Child themes are important, because they protect your original theme files.
Appearance → Themes->your child theme-> activate
Edit WordPress theme HTML
Go to Appearance → Editor in your WordPress dashboard and choose the child theme you have activated.
There are index.php, functions.php, header.php, footer.php etc.
In its most basic form, PHP is grabbing content from your WordPress site and outputting it in an HTML page. Take a look at this section of code specifically:
<div class="site-info">
<?php do_action( 'twentyfourteen_credits' ); ?>
<?php printf( __( 'Proudly powered by %s', 'twentyfourteen' ), 'WordPress' ); ?>
</div><!-- .site-info -->
That code translates to this HTML:
<div class="site-info">
Proudly powered by WordPress
</div><!-- .site-info -->
Try to understand like the above codes php and html. you can easily edit it.
Edit WordPress theme CSS
Appearance → Editor->style.css(child theme).
you can change the style of detailed reference click here

Go to your wp-admin, Appearance (on the left sidebar), Editor. Select a theme and a file to edit, then press Save.

In WordPress Dashboard > Appeareance > Editor you can't edit HTML files (only PHP and CSS files) as you can read in Codex - "Editing files"
Your question could become why don't you see HTML in PHP files?
This is because PHP generates HTML code and then you can see lots of PHP code inside a PHP file, but not necessarly HTML code. In order to understand how PHP works I suggest you to read this useful tutorial.

Related

How to add plugins to my custom wordpress theme?

I'm making a WordPress theme by myself since I'm working for the first time in Wordpress I've watched some tutorials about it.
I have page.php header and footer and ofc an index. I insert the content from the pages with this:
<?php echo get_post_field('post_content', $post->ID); ?>
but I tried the get_post in a while loop with same result..
Everything is fine but when I want to use a plugin I can't add to my page... When I insert the shortcode of it it shows only the shortcode string... There are some plugins where I can click a "view" option and it would show a page with my plugin (for example a calendar) but that page is empty...
When I activate an original theme it works instantly... So I'm sure something is missing from my theme something which can load the plugins but I couldn't find solution for it.
Any ideas?
Did you add the <?php wp_head(); ?> function before the head area of the html document is closing? It imports important scripts and styles from wordpress itself (and probably also from the plugins).
See here:
https://developer.wordpress.org/reference/functions/wp_head/
Before closing the body area, the template should also include
<?php wp_footer();?>
See here:
https://developer.wordpress.org/reference/functions/wp_footer/

WordPress Custom Template - Divi module shortcode displays as text

I have written a head navigation using the full-width code module in Divi. It is in my Divi library as a global module and works perfectly with most of my pages, but not the ones that are using my custom templates.
The way I am displaying the module is by using it's shortcode at the bottom of my child theme's header.php right before the closing header tag:
<?php echo do_shortcode('[showmodule id="XXXX"]'); ?>
where XXXX is the actual id. But on the pages using custom templates the module displays as plain text like so:
'[et_pb_section global_module="my modules id"][/et_pb_section]'
I have also tried changing the code to:
echo apply_filters('the_content','[showmodule id="XXXX"]');
however, the same issue occurs.
Any Ideas?
I found a good method for this in a thread in the Divi Support Forum, which this dude also explains in a video:
https://www.youtube.com/watch?v=PJqcfz5NyZs
Once you get the global Module number from the URL when viewing it in the Divi Library, the shortcode syntax to load the global module in php is:
<?php echo do_shortcode('[et_pb_section global_module="###"][/et_pb_section]'); ?>
One drawback is that loading a module through a php template file does not allow it to be editable through the Visual Builder.
So, I made a modification to this so I could have an easier place to edit the global footer by adding it to my site's homepage Divi layout, then adding this snippet in my footer.php template file to load on the rest of the pages:
<?php if ( !is_front_page() ) : ?>
<?php echo do_shortcode('[et_pb_section global_module="2310"][/et_pb_section]'); ?>
<?php endif; ?>
This way I can easily have a client use the Visual Builder on the homepage to edit the global footer, instead of having to find it in the Divi Library, which they would likely forget and takes extra click to get there.
Please try adding this code. It will solve your problem
<?php echo do_shortcode('[showmodule id="my modules id"]'); ?>

Customize static wordpress pages correctly

I m building a word press site with a unique theme that i created, now i got like 10 classes of different styles for the static pages in my site.
The question is, when i want to display the content of the page, with all the forms images and text, how should i do that? With the text editor where the user usually insert his content for the posts in regular wp website? Or should i insert the content images and forms hard coded in the php custom page template of those static pages?
In the text editor if i insert some html in edit as html it's becoming a mess it doesn't seems right to create sections and div where the user regularly just put his raw content, and anyway adding more content to a static page in the future will require my intervention to wrap it with css sections and div's definitions and classes...
By the other hand to write raw data with images and forms in the php custom page template doesn't seems to me the right choice... Is it normal to do so for static pages?
Thanks everyone!
Wordpress static pages, by default contains text and images that you can put into it using the Wordpress text editor. This content is known as "The Content" in WP context.
If you want to put into your static page some elements that cannot be setted by the text editor (like your own forms, per example) you'll need to create your own page template with hard-coded elements.
Example:
<?php /* Template Name: My custom page template */ ?>
<?php get_header(); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div id="article">
<div class="date"></div>
<!-- Your own custom content here -->
</div>
<div class="clear">
<?php if ( comments_open() ) : ?><div id="comments"><?php comments_template('', true); ?> </div>
</div><?php endif; ?>
<?php endwhile; ?>
<?php endif; ?>
<?php get_footer(); ?>
I normally will put those styles into styles.css of your theme. Even if it's images that will be standard images for the theme or shortcodes available to the user you want it to load from within the styles.css page. You don't want to do anything static like that with WordPress. Updates can mess it up as well as having issues with inline css messing up your SEO for the site.
If the user needs to do something in the editor to have an image show or something like that you can do it as a shortcode. That's normally going to be your best approach. Have you used shortcodes and loaded the images that before?

how to remove Site Name proudly powered by Wordpress Entries(RSS) and Comments(RSS)

I have developed my own custom theme for WordPress. Now recently I installed my theme under WordPress 3.9.1 and I have noticed a rather annoying message which appears on the second and third pages of my site. The message appears in the footer area. It does however not appear on the home page. The message conveyed is as following:
site name proudly powered by Wordpress Entries(RSS) and Comments(RSS)
Now one solution I have seen is to put the following into the style.css. however it does not work.
#site-generator{
display:none;
}
The second solution is to modify the footer.php file and remove a block of php code, now interestingly enough my theme does not contain a footer.php file. Just wondering is it some WordPress system file pushing out the message on my theme.
Any help greatly appreciated.
If you call get_footer() anywhere in your theme, but your theme doesn't include a footer.php, then a footer template is provided for you automatically:
If the theme contains no footer.php file then the footer from the default theme wp-includes/theme-compat/footer.php will be included.
This "theme compatibility" footer outputs a standard footer which includes the lines:
<?php printf(__('%1$s is proudly powered by %2$s'), get_bloginfo('name'),
'WordPress'); ?>
<br /><?php printf(__('%1$s and %2$s.'), '' . __('Entries (RSS)') . '', '' . __('Comments (RSS)') . ''); ?>
Which I'm pretty sure is where your "site name proudly powered by Wordpress Entries(RSS) and Comments(RSS)" will be coming from.
So, check your theme files for "get_footer()". If you don't have a footer.php, then you probably don't want to be using that.
However, it would be normal to include a footer.php so you can have standard footer code across all pages, for doing vital things like calling wp_footer() on every page, which is something you must do in a theme.
wp_footer is a standard hook point for plugins, themes, and WordPress itself to inject scripts, and anything else necessary, just before the closing of the HTML body, </body>. It's how the admin menubar gets output, for example, and often plugin Javascript. So you absolutely want it called at the bottom of every template, and providing a footer.php that does this (and closes your <body> and <html> tags, etc.) and including it from all of your template pages with get_footer() is the normal way.
If your current code works well and produces valid HTML while using the standard "compatibility" get_footer(), then personally, I'd add the bare minimum footer.php to your own theme:
<?php wp_footer(); ?>
</body>
</html>
Your CSS should probably say something more along the lines of
.site-generator {
display: none;
}
or if that doesn't work you could always do
.site-generator {
display: none!important;
}
What you have is missing the '.' which refers to the class 'site-generator'. It might also be an ID, in which case, it should look like
#site-generator {
display: none;
}
If you'd rather remove it from the theme, you could let me know what theme you're using, and I can take a look at where it is occurring in the theme.
I know this can be done only by making some changes on the file footer.php.If you can't find the footer.php file, look for another PHP file with "foot" or "footer" in the filename.
Just see a detailed explanation here.
If you're not using a footer.php file, the footer info must be in the bottom of index.php and page.php. My hunch is that the generator was removed from your page file, but not the index file. I would check that file and make sure the code isn't there.
If that doesn't work, you need to see what the css selector is surrounding the generator. If you right click on the sentence within your browser, you should get some sort of 'inspect element' option. (I use Chrome, but other browsers have similar tools.) Inspect the element and you should see some sort of class or id to target. It may be a
<div id="example">
or
<p class="example">
Find the id or class and modify your css, i.e.:
for an id:
#example {
display: none;
}
or for a class:
.example {
display: none;
}
If the generator is being added by an external source you may need to add !important.
.example {
display: none!important;
}
Good luck!
Another route would be copy the footer.php file in your theme's directory and paste it into a child theme. Open up the footer.php file in your child theme and delete the text with the sitename and powered by. It should be wrapped in php tags.
Easy! If your theme doesn't have a footer.php file (for example if you are creating a theme from scratch), create it and leave it empty. It will just disapear the annoying "proudly powered by..."
Example of theme/:
style.css // theme info
header.php // empty file <----
footer.php // empty file <----
index.php // file with wordpress loop, etc.
you can edit your theme in admin panel, (footer.php)
if you see an error on your homepage when you edit the footer.php you can use javascript to delete that. But first you should add tag with an id, then access that id in javascript like;
function myFunc(){
document.getElementById('id').innerHTML ="";
}
then edit your body tag like
<body onload="myFunc()">

Include wordpress theme in a custom php page

I need to include a custom PHP page in Wordpress.
So what I need to do is just to show this custom php page using the Wordpress theme installed on that Wordpress.
Does not mind which theme is up, the custom php page will have to be shown under any theme is installed in that moment.
How do I do it in Wordpress?
I am new to Wordpress development.
Thanks
Creating a custom php page that will be able to be viewed in any theme (and have the theme applied) would be considerably difficult.
Each wordpress page calls specific theme functions of that particular theme, as well as referencing files of that theme to generate header, footer, css files, javascript files, etc.. Your custom page would need to plan for all of these contingencies, for each possible theme used.
Here's a alternative solution: inject PHP code directly into a standard wordpress page via this plugin http://wordpress.org/extend/plugins/allow-php-in-posts-and-pages/
Meaning: you make a normal wordpress page, but are able to add php to it. When this page is rendered, the proper page template is used, and all the theme references are taken care of for you.
You could do this easily with a page template. WordPress allows you to create page templates which can be assigned to a page via the 'Page Attributes' panel within the page editor. These templates are php files inside your theme directory which begin with some code like (see this page in The Codex for more info):
<?php
/*
Template name: Custom PHP Page
*/
?>
<?php // begin custom PHP page ?>
Typically a template is a variation on the regular theme files (such as page.php) and would call the get_header() and get_footer() functions and have an instance of the loop. However if you simply want to use a custom PHP page, then all you need to do is create the file you want inside the current theme directory and add the above code at the very top of the file.
To output the custom PHP page on your site, you would need to add a new page via the admin area and then assign your new page template to this page.
Alternatively, if you want to include a custom PHP page inside an existing theme file, you use the code:
<?php include(TEMPLATEPATH . '/includes/file.php'); ?>
in this case your custom PHP file would be located inside a directory called 'includes' within your current theme directory.
Tim.
It's not that difficult. Here's what you need:
Once you include the main wordpress blog header, the entire armamentarium of wordpress functions is available to you, which allows you to get the active theme's directory. Once you get that, just include the header and the footer of the theme.
// If title is not displayed before loading the header, Wordpress displays "Page not found" as the title
echo "<head>
<title>Your page title</title>
</head>";
// Include the Main Wordpress blog header
include $_SERVER['DOCUMENT_ROOT']."/wp-blog-header.php";
//Now, you need to get the active theme's folder, and get a relative path to that folder
$homeurl=home_url();
$ddir= get_bloginfo( 'template_directory');
$current_theme_relative_path=substr_replace($ddir, "", 0, strlen($homeurl));
//echo "<br/>The relative path to the currently active theme is ".$current_theme_relative_path;
//Once you have the path, include the header and footer, adding your custom php code in between.
// Include the specific theme header you need
include $_SERVER['DOCUMENT_ROOT'].$current_theme_relative_path."/header.php";
// Your custom PHP code STARTS here
// Add anything you want to display to the user
echo "
<h2>
Your form has been submitted
</h2>";
// END of custom code
?>
<?php
}
// Now end with the theme's footer
include $_SERVER['DOCUMENT_ROOT'].$current_theme_relative_path."/footer.php";
?>
Was very helpfull (even if dated of 2011-13)
Also, as a thank you, i'm sharing the version i made
it's usefull if your wordpress folder is not located at ROOT
PasBin Link - wordpress custom php page
just change the value of $wplocalpath in :
// Wordpress path (if wordpress is not located at ROOT
// $wplocalpath="/Wordpress1";

Categories