Using Wordpress I am designing a theme for a client's website.
I have set the landing/home page to a static page, and I'm using front-page.php as the default template for this.
My question is how can I style individual elements on the page when all of the page content is called in at once using <?php get_template_part( 'template-parts/content', get_post_format() ); ?>
Currently I multiple <div>'s in the WP page content editor like so:
However, I'm concerned that my client or something else, may delete this content by accident and completely spoil the design. How can I separate content and style it accordingly in my template?
My question is how can I style individual elements on the page?
There are always body classes you can use for different pages/posts.
How can I separate content and style it accordingly in my template?
There are few options depend on what you need:
Turn off "Visual" editor mode for each user account. It sort of helps.
Move the custom HTML into the template files. If that's OK.
Use custom fields, preferably with Advanced custom fields plugin.
For every page,if you need the alone class then function :body_class() : is sufficient.Syntax :- < body < ?php body_class(); ?> > and you can also implement the another function : post_class : for the loop class.Syntax :- < body < ?php post_class(); ?> >
Related
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/
I am new to ACF and am trying to understand how to create entire sections of content.
I can't seem to find any answers to this, though I am perhaps not phrasing the question correctly because of my limited understanding.
I have created my first website using ACF and Gutenberg where I have a separate php template for each block of content, which is then registered as a Gutenberg block. This works perfectly in that the content blocks can contain entire blocks of html/php and are always available but only appear on the page when they are chosen, making it very user friendly.
What I am struggling to understand is how you can insert an entire section WITHOUT Gutenberg - say using a shortcode.
At the moment if I have a structure like so:
<section class="reusable-block">
<div class="title-box">
<?php if( get_field('main_heading') ): ?>
<h1 class="hero-heading"><?php the_field('main_heading'); ?></h1>
<?php endif; ?>
</div>
</section>
If I use the shortcode [acf field="main_heading"] It will obviously output the contents of that field but how do I enter a shortcode that would enter the entire section on a needs basis across any page?
If I hard code it into the page template then the fields are always visible on the WordPress backend page, regardless fo wether they are being used, though if that's the way it has to be then I'll work with.
Unfortunately I need to use ACF with a page builder for a current project (I do not have a choice on this). This is the reason I cannot use Gutenberg and register blocks and will need to use shortcodes.
In short, is there a way to create an entire ACF block that would then contain html and acf fields, and even better that could be built in a separate PHP file as you would when using this in conjunction with Gutenberg.
I have watched about 3 courses online and read lots of resources, but this one thing still seems to allude me.
You already mentioned one possibility yourself: creating a custom shortcode for this.
Therefore, you either need to create a new plugin, or, append this to your (child) theme's functions.php:
function shortcodeHeadingBlock($attr, $content = null) {
if (! class_exists('ACF') ) { // will not work without ACF
return '';
}
$opts = shortcode_atts([
'field' => 'main_heading',
], $attr);
ob_start();
?>
<section class="reusable-block">
<div class="title-box">
<?php if( get_field($opts['field']) ): ?>
<h1 class="hero-heading"><?php the_field($opts['field']); ?></h1>
<?php endif; ?>
</div>
</section>
<?php
return ob_get_clean();
}
function setupShortcodes() {
add_shortcode('headingblock', 'shortcodeHeadingBlock');
}
add_action('plugins_loaded', 'setupShortcodes');
After this, you can use the shortcode
[headingblock]
anywhere across your page where shortcodes are interpreted. The shortcode first checks if the ACF-class is available which implies that the ACF functions should be available, too.
The shortcode also has an optional field attribute that defaults to 'main_heading', meaning you can also do
[headingblock field="another_acf_field_name"].
It then returns your code template and inserts the desired ACF field.
Just in case your .title-box CSS isn't available in the admin interface, you might have to enqueue it separately using the admin_enqueue_scripts hook. Regarding CSS, you will also have to make sure the full selector for .title-box doesn't contain additional classes/objects that might no longer apply when the shortcode places it into other places on the page.
So, i finally got my css and js scripts to load on WP
Now there is but one thing i need to get done.
i have my own theme, including header.php, footer.php, page.php
header.php and footer.php is working just fine, loading scripts and showing properly, but now i need to add all the other content.
my page.php is currently:
<?php /* Template Name: CustomPageT1 */ ?>
<?php get_header(); ?>
<?php the_content(); ?>
<?php get_footer(); ?>
I would need to somehow add html content to pages, i have about 20 ready made .php pages which needs to be transfered to WP.
Soooo how do i go about making new page (pages -> add new) and using page template while getting the html content to show up?
I've tried to just make new page and in text mode add up all the html into page, but it only shows empty page with header and footer, so the problem is most likely the page.php and i have no idea how to get it to work.
You can do look like this:
<?php /* Template Name: CustomPageT1 */ ?>
<?php get_header(); ?>
<?php
while ( have_posts() ) : the_post();
the_content();
endwhile;
?>
<?php get_footer(); ?>
You are on the good way. While developing a custom theme from scratch is a great challenge it's not too hard.
I could recommend to take it easy and follow this tutorial I found really helpful some time ago, I learned a lot there:
Developing a WordPress Theme from Scratch
You must have the official source documentation always in your mind:
Theme Development
Do some reading and you will see that making themes is really fun and gratifying :)
EDIT:
I would recommend picking a good starter theme or framework and work using child themes. You have plenty of them to pick.
To get started adding a new page to your WordPress site, find the Pages menu in the WordPress Dashboard Navigation menu. Click Add new.
The WordPress page editor looks nearly identical to the post editor, except for a few different boxes located on the right side of the screen.
Add the title of the page, like About. Note: If you have pretty permalinks set up, the title of your page will also be the URL slug.
Next, add some content.
The Publish section of the page editor is exactly the same as for writing posts. When you’re ready to publish, you can either publish immediately, save this or a draft, or schedule the page to be published later.
The Page Attributes section applies a parent page and template to your new page. For the Parent section, you can arrange your pages into hierarchies. For example, you could create this new page with additional pages under it. There are no limits to how many levels you can nest pages.
Some WordPress themes have custom page templates, so the next Template section allows you to apply a template to your new page.
The Order box allows you to order your page numerically. Pages are usually ordered alphabetically, but you can choose your own order by entering a number in this field.
Preview the page one last time, then click Publish. You’ve added a new page to your WordPress site.
This is how your
your index.php should look like :
<?php
get_header();?>
<div class="YourContainer">
<div class="Whatever">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="ContentSectionDiv">
<?php the_content();?>
</div>
<?php endwhile; ?>
<?php else: ?>
<?php endif; ?>
</div>
</div>
<?php get_footer();?>
you can make also a custom loop
<?php
$arg = array("post_type" => "services",
"posts_per_page" => 9,
"order_by" => "date",
"order" => "ASC",
);
$services = new WP_Query($arg);
if ($services->have_posts()):;
while ($services->have_posts()):$services->the_post();
the_content();
endwhile;
endif;
?>
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?
I am relatively unfamiliar with Wordpress and I am creating a custom theme for a client. I would like to either display or remove the main menu depending on the page type. I have researched several options like removing the navigation from header.php and referencing it separately and also making the menu conditional which is preferable.
I have a custom page type in my theme called 'landing page' on which I would like the menu to be never be displayed, though it will be on every other page. Ultimately there will be a lot of these and I would rather I didn't have to intervene.
I would rather not duplicate my header.php file but I can only find reference to displaying the menu conditionally like below by page name or ID which seems ridiculous.
<?php
if (is_page('contact')){
<?php include(TEMPLATEPATH.'/headerA.php'); ?>
}
elseif (is_page('gallery')){
<?php include(TEMPLATEPATH.'/headerB.php'); ?>
}
else {
<?php include(TEMPLATEPATH.'/headerA.php'); ?>
}
?>
Rather than including files as above, I will put the whole thing into my header and just make the navigation conditional. Does anyone know how I should approach this using my custom page type landing page rather than by page name so every page created with that type will never have a menu?
Thanks
Are you talking about a Custom Post Type (CPT) or a page called landing-page?
They are completely different. See http://codex.wordpress.org/Post_Types
In any event, this will work for a custom post type or a page:
if ( !is_singular( 'custom-post-type-name-or-page-slug-here' ) ) {
get_template_part('menu');
}
It says: "If this page is not a single page or a CPT, load the file menu.php from the theme folder."
See also http://codex.wordpress.org/Include_Tags:
The get_template_part() tag includes the file {slug}.php or
{slug}-{name}.php from your current theme's directory, a custom
Include Tags other than header, sidebar, footer.