I am developing a Wordpress theme. To display the content I use
while ( have_posts() ) : the_post();
the_content();
endwhile;
This, as you know, displays the contents as html like
<h1>Title<h1>
<p>Lorem Ipsum</p>
etc. Is it possible to make Wordpress add classes to these content elements or even wrap these elements like
<h1 class="col-sm-12">Title<h1>
<p class="col-sm-8">Lorem Ipsum</p>
or
<div class="col-sm-12">
<h1>Title<h1>
</div>
<div class="col-sm-8">
<p>Lorem Ipsum</p>
</div>
respectively?
// you can do this like this
<?php while ( have_posts() ) : the_post(); ?>
<div class="col-sm-12">
<h1><?php the_title() ?><h1>
</div>
<div class="col-sm-8">
<?php the_content() ?>
</div>
<?php endwhile; ?>
You could use "TinyMCE advanced" to create custom buttons that would wrap the text in a div with the classes you want.
This tutorial might help.
Related
I'll get quickly to the point: I'm creating a Wordpress theme for my blog, using _s starter theme. I'm using the bootstrap 4 grid system, in order to achieve a 2 column post (on home page/search/archive): the post thumbnail inside a div on the left, while the post content (title, excerpt etc.) on the right.
I want to set the post thumbnail as a background-image of the div, I already achieved that, on desktop/tablet no problem, but on mobile when the thumbnail is above the post content, it won't show up, unless I set a fixed height to the image, I'm ok with that, but the issue is that some posts do not have a post thumbnail, so you can imagine that the result is pretty brutal, with blank space on post without thumbnail;
Maybe this is stupid and easy, but the question is: is there a way to solve this? Maybe it's possible to set the fixed height on mobile but only on posts that has the thumbnail?
<div class="container-fluid">
<div class="row">
<div class="post-thumbnail col-md-5" <?php echo 'style="background-image: url(' . get_the_post_thumbnail_url() . ')"' ?>>
</div>
<div class="post-content <?php echo (has_post_thumbnail())?$small:$large;?>">
</div> <!-- post content -->
</div> <!-- row -->
</div> <!-- container fluid -->
If I understood you correctly, maybe you could try something like this
<div class="container-fluid">
<div class="row">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<article>
<div class="col-md-6">
<h2>
<a href="<?php the_permalink() ?>">
<?php the_title(); ?>
</a>
</h2>
<?php the_content(); ?>
</div>
<div class="col-md-6">
<?php if(has_post_thumbnail()) : ?>
<div class="post-thumbnail" style="background: url('<?php get_the_post_thumbnail_url(); ?>') center center / cover"></div>
<?php else : ?>
<div class="post-thumbnail" style="background: url('[some fixed image url]') center center / cover"></div>
<?php endif; ?>
</div>
</article>
<?php endwhile; else: ?>
<p>There no posts to show</p>
<?php endif; ?>
</div>
</div>
I have an issue with the select field not showing.
I have flexible rows and then repeaters within that but the select/radio/checkbox dont show at all in the repeaters.
I have read through reams of related questions but not getting it to show.
I need this is the most basic terms like https://www.advancedcustomfields.com/resources/select/
Where it just changes the value.
I have tried get sub and the sub and it is just blank.
Any help would be appreciated.
Thanks in advance
<section class="main-section" id="<?php the_sub_field('unique_id'); ?>" style="padding: <?php the_sub_field('section_padding'); ?>">
<div class="container">
<div class="row">
<?php while ( have_rows('content_blocks') ) : the_row(); ?>
<div class="col-sm-12 col-md-4">
<div class="block">
<?php $value = get_sub_field('column_width'); var_dump($value); ?>
<?php the_sub_field('block'); ?>
</div>
</div>
<?php endwhile; ?>
</div>
</div>
I have installed WordPress 4.5.3 and have built my custom theme. Everything works pretty well except for the fact that some pages don't show any content at all. I have tried to search on how to fix this but I can't find any solution, because my own problem has pages that don't even enter 'the loop'. I have tried to echo things within the loop to make sure that it enters but to no avail. My theme is still offline so i could not provide a link to it. Please any idea why it is not entering the loop.
<?php get_header(); ?>
<style type="text/css">
.submit input {
height: 50px;
width: 200px;
background: #f88b0c;
}
</style>
<div class="row">
<?php while ( have_posts() ) : the_post(); ?>
<div class="col-md-12 ">
<h2 class="title ">
<center>
<?the_title()?>
<hr>
</center>
</h2>
</div>
<div class="col-md-12">
<?php if(has_post_thumbnail())?>
<?php the_post_thumbnail(); ?>
</div>
<div class="col-md-12">
<p>
<?php the_content(); ?>
</p>
</div>
<?php endwhile;?>
</div>
<?php get_footer(); ?>
I know I have to ask in Wordpress forum.
But I am sort of crazy to stackoverflow, I ask here first.
I am developing Wordpress theme from scratch. Inside my blog post, I'd like to wrap the thumbnail image inside the text.
The code I used is
<div class="row">
<?php if( has_post_thumbnail() ): ?>
<div class="col-xs-12 col-sm-4">
<div class="thumbnail"><?php the_post_thumbnail('small'); ?></div>
</div>
<div class="col-xs-12 col-sm-8">
<?php the_content(); ?>
</div>
<?php else: ?>
<div class="col-xs-12">
<?php the_content(); ?>
</div>
<?php endif; ?>
</div>
Now is the content and thumbnail image are side by side.
I like to wrap the image inside text.
The image is .
You are wrapping the thumbnail and the content in two different columns, that is why they appear side by side. Change your code to this:
<div class="row">
<?php if( has_post_thumbnail() ): ?>
<div class="col-xs-12 col-sm-12">
<div class="thumbnail"><?php the_post_thumbnail('small'); ?></div>
<?php the_content(); ?>
</div>
<?php else: ?>
<div class="col-xs-12">
<?php the_content(); ?>
</div>
<?php endif; ?>
</div>
Then float the thumbnail div to the left or right with css.
.thumbnail {
float:left;
}
I was reading Wordpress's coding standards
The only confusing part for me is the vertical spacing between HTML code for instance:
Default Wordpress Theme 3.03:
sidebar.php:
<li id="search" class="widget-container widget_search">
<?php get_search_form(); ?>
</li>
<li id="archives" class="widget-container">
<h3 class="widget-title"><?php _e( 'Archives', 'twentyten' ); ?></h3>
<ul>
<?php wp_get_archives( 'type=monthly' ); ?>
</ul>
</li>
(Here's space between the two <li> tags)
header.php
<div id="masthead">
<div id="branding" role="banner">
<?php $heading_tag = ( is_home() || is_front_page() ) ? 'h1' : 'div'; ?>
<<?php echo $heading_tag; ?> id="site-title">
(Here, there's no space between div tags)
header.php (line 79...):
</div><!-- #branding -->
<div id="access" role="navigation">
<?php /* Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff */ ?>
<div class="skip-link screen-reader-text"><?php _e( 'Skip to content', 'twentyten' ); ?></div>
<?php /* Our navigation menu. If one isn't filled out, wp_nav_menu falls back to wp_page_menu. The menu assiged to the primary position is the one used. If none is assigned, the menu with the lowest ID is used. */ ?>
<?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); ?>
</div><!-- #access -->
</div><!-- #masthead -->
</div><!-- #header -->
<div id="main">
(Here, there's is space between those 3 <div> tags
What's the coding standard of vertical spacing (I don't think it is random)?
Not sure i really follow you, but some examples..
Well formatted HTML
Indentation used, no excessive whitespace
<div class="example1">
<div class="example2">
<div class="example3"></div>
<div class="example4"></div>
</div>
</div>
Poorly formatted HTML - Example 1
No indentation
<div class="example1">
<div class="example2">
<div class="example3"></div>
<div class="example4"></div>
</div>
</div>
Example 2
Useless whitespace
<div class="example1">
<div class="example2">
<div class="example3"></div>
<div class="example4"></div>
</div>
</div>
This isn't really specific to WordPress, any good teacher or tutorial will encourage well formatted coding, and there's little excuse when you're using a good editor(i mean seriously, which do you find most readable and easier to understand?).
More..
Well formatted PHP
Indentation used appropriately
if( something ) {
do_something()
if( some_nested_condition )
do_something_else();
}
Poorly formatted
No indentation, harder to read
if( something ) {
do_something()
if( some_nested_condition )
do_something_else();
}
Formatting your code makes it easier to read, understand, or update/maintain(it's not something that will make a whole lot of sense until you start dealing with code on a regular basis). Then again, i'm not the best at explaining these things, so i'd suggest refering to information already available for the "why".. (i know my reasons)..
Mixed PHP and HTML example
Mock template loop, only for illustration
<div class="wrapper">
<div class="header">
<h1>My Website Heading</h1>
</div>
<div class="content">
<?php if( have_posts() ) : ?>
<div class="wrapsallposts">
<?php while( have_posts() ) : the_post(); ?>
<div class="post">
<h2><?php the_title(); ?></h2>
<div class="postcontent"><?php the_content(); ?></div>
</div>
<?php endwhile; ?>
</div>
<?php endif; ?>
</div>
</div>