How to call wysiwg fields and place and style them properly?

• rpk

• February 13, 2014 at 2:06 am

I build a custom post type for news/blog posts. beneath is the html/php snippet for a single post view. one of the used fields is a wysiwg field (news-post).

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
	<section>
			<h2 class="mus-hi slogan-head fancy"><span><?php the_time( 'j. F Y' ); ?></span></h2>
			<p class="bran-hn slogan-state packed"><?php the_title(); ?></p>
	</section>	
	<?php $blogpostimage = get_field('news_image'); ?>
	<span class="picture" data-picture data-alt="<?php echo $blogpostimage['alt']; ?>">
		<span data-src="<?php echo $blogpostimage['sizes']['is338']; ?>"></span>
		<span data-src="<?php echo $blogpostimage['sizes']['is338_x15']; ?>" data-media="(min-device-pixel-ratio: 1.5)"></span>
		<span data-src="<?php echo $blogpostimage['sizes']['is338_x2']; ?>" data-media="(min-device-pixel-ratio: 2.0)"></span>
		<span data-src="<?php echo $blogpostimage['sizes']['is580']; ?>" data-media="(min-width: 400px)"></span>
		<span data-src="<?php echo $blogpostimage['sizes']['is580_x15']; ?>" data-media="(min-width: 400px) and (min-device-pixel-ratio: 1.5)"></span>
		<span data-src="<?php echo $blogpostimage['sizes']['is580_x2']; ?>" data-media="(min-width: 400px) and (min-device-pixel-ratio: 2.0)"></span>
		<span data-src="<?php echo $blogpostimage['sizes']['is811']; ?>" data-media="(min-width: 675px)"></span>
		<span data-src="<?php echo $blogpostimage['sizes']['is811_x15']; ?>" data-media="(min-width: 675px) and (min-device-pixel-ratio: 1.5)"></span>
		<span data-src="<?php echo $blogpostimage['sizes']['is811_x2']; ?>" data-media="(min-width: 675px) and (min-device-pixel-ratio: 2.0)"></span>
		<span data-src="<?php echo $blogpostimage['sizes']['is580']; ?>" data-media="(min-width: 970px)"></span>
		<span data-src="<?php echo $blogpostimage['sizes']['is580_x15']; ?>" data-media="(min-width: 970px) and (min-device-pixel-ratio: 1.5)"></span>
		<span data-src="<?php echo $blogpostimage['sizes']['is580_x2']; ?>" data-media="(min-width: 970px) and (min-device-pixel-ratio: 2.0)"></span>
		<span data-src="<?php echo $blogpostimage['sizes']['is811']; ?>" data-media="(min-width: 1141px)"></span>
		<span data-src="<?php echo $blogpostimage['sizes']['is811_x15']; ?>" data-media="(min-width: 1141px) and (min-device-pixel-ratio: 1.5)"></span>
		<span data-src="<?php echo $blogpostimage['url']; ?>" data-media="(min-width: 1141px) and (min-device-pixel-ratio: 2.0)"></span>
		<noscript><img src="<?php echo $blogpostimage['sizes']['is580']; ?>" alt="<?php echo $blogpostimage['alt']; ?>"></noscript>
	</span>
	<?php the_field( 'news_post' ); ?>
<?php endwhile; ?>
	<?php wp_reset_postdata(); ?>
<?php else: ?>
	<p>Entweder wir haben mit allen Partnern There are no posts or pages here</p>
<?php endif; ?>

no matter what i do: either if i place <?php the_field( ‘news_post’ ); ?> directly into the code like above or if i wrap it inside a p tag <p class=”bran-hn”></p> or if i wrap it in a div. always the content is wrapped inside a pre tag (in the case if the the_field call is placed inside a p tag the p is empty and the pre is placed afterwards). :/

my basic goal would be actually instead of using the usual text area that in that field the user has the opportunity to write more than usual. even a few paragraphs. that each paragraph would be wrapped in p tags with a certain class assignment. and that there is the option to add another picture within the wysiwg editor via a short code or add a youtube link.

so far i only get the pre wrap; but also uncertain if my goal would be even accomplishable with the wysiwg field. :/ thanks ralf

• rpk

• February 13, 2014 at 2:28 am

i don’t know why and how, i’ve only pasted the content into the wysiwg field and did nothing but somehow one news post (actually the one i tested around with) got pre instead of paragraph assigned in the lower left of the rte field. :/ problem solved.