Wordpress - Making the backend more user friendly. Custom fields? - html

I'm developing a Wordpress website for a client based on Avada-theme and am a little worried, that the client is likely to mess up formatting and styling when being confronted with the standard back-end + WYSIWYG editor.
Let's take the URL: http://www.consilio-suedwest.de/angebote/ as an example.
So this is what the code looks like in the text view inside the first content box:
Die Zukunft aktiv und erfolgreich gestalten
Instead of having the client to edit the content boxes, I would like to display simply a text only field with a small description like "content box 1" in which the client can type in plain text.
Then this plain text would have to be transported with some kind of shortcode into the correct place.
So it would have to be something like.
[[plain text here]]
I don't know if something like this exists or what options I have to create a functionality like this. I did some research and, of course, stumbled upon custom fields, but it seems like I have to get into editing php.files and stuff which I don't want to do.
Appreciate your help

Take a look at the Advanced Custom Fields plugin. It has greatly helped me with improving the UI experience for WordPress admins.
It allows you to create a wide variety of custom fields, and has an extensive filtering feature to place the fields only on the pages/posts you want. For example, if you had a "Services" page, and several pages that were children of Services, you could create a "Services Description" text field that only displays on pages with Services as its' parent.
If you made a text field called "services_description" in your php code, you would call the value of the field using this:
<h3><?php the_field('services_description'); ?></h3>
If you wanted to check if the field had a value before drawing the tag, you'd do this:
<?php if(get_field('services_description')){ ?>
<h3><?php the_field('services_description'); ?></h3>
<?php } ?>
You can use many different field types, with their own settings. A sampling of the fields are:
Text Field
WYSIWYG Editor
Image Field
Gallery
Repeater
Color Picker
and many more.
They also have a great support/documentation system on their website, so you can learn how to utilize all of the various fields.
Sure, you could hand-code custom fields to your site, and there's plenty of tutorials out there to do that, but ACF is great for rapid deployment of custom content, so I'd really recommend it. They have a free and a paid version, but you should be fine with the free version.
I just noticed your last line about not wanting to edit php files. That is going to be extremely tricky in almost any solution to this. There are ways that you can hook into the_content() to alter what goes in it, but even that would still require altering your functions.php file.

Related

Create custom templates using ckeditor, tinymce or any online editor

I am not sure if the title represents what exactly I need to do, But here is the details. I am building a website using PHP that allows people to create different templates, then they should select one of them and then fill the fields to fill the placeholders. For example consider the following image
The name of the recipient could be a placeholder so some part of the template can be
Dear {recipient}
{body}
and I prepare two fields for recipient and the body and it will be replaced by the value of the corresponding field. I can do this. What I can't do is how to let the user to align the placeholders in the paper. For example there is a placeholder for the date that must be at right of the page, or any other placeholder that can be place inside the paper (same as the following image). I would like to know if ckeditor or any other editor allows me to create such template?
The structure of the template must be kept in A4 or A5 print page.
I’m having trouble understanding your question. If you're looking for templates in TinyMCE editor, I think you should try using template plugin for tinymce - there is one for wordpress. You can write your own plugin too, there was question about it.

Prefix a URL with CSS

I am pulling the content of a bunch of customer reviews from a website using a tiny piece of PHP, though the title of each review contains the URL to the original review on the website that it comes from, which is great, except that the URL that is pulled does not contain to originating websites full address.
So on my website, the link does not work. You can see it in action here:
http://www.clearpandb.co.uk/new2016/feedback.php try clicking one of the review titles.
Is there any way to fix this with CSS? I think all it needs is a prefix to the original site. What is pulled from the originating site is just e.g. "/job/view/1971050", which when clicked tries to find this on my site (obviously won't find it). So I need to prefix it with "www.mybuilder.com" so that it works.
If the above isn't possible, a last resort might be to just disable the URL (without removing the title text itself) just so that there isn't a bunch of broken links.
PHP being used:
<?php
include_once('simple_html_dom.php');
$target_url = "https://www.mybuilder.com/profile/view/clear_plumbing_and_building_ltd/feedback";
$html = new simple_html_dom();
$html->load_file($target_url);
foreach($html->find('li[class=job-view-feedback]') as $jobviewfeedback){
echo $jobviewfeedback;
}
?>
I'm using a modified version of this tutorial for this:
http://www.makeuseof.com/tag/build-webcrawler-part-2
Which makes use of the a "helper" called "Simple HTML DOM".
Any help or pointers in the right direction are much appreciated, thanks in advance!
Can you edit that PHP? If so, do a PHP string replace on $jobviewfeedback... search for href="/ and replace with href="http://www.mybuilder.com/
so instead of
echo $jobviewfeedback;
you'd have
echo str_replace('href="/', 'href="http://www.mybuilder.com/', $jobviewfeedback);

Inserting or copy/pasting picture to a textbox

I have a file with a textarea (named "Resolution support") in which you can explain how to solve a problem. My problem is that a user would be able to add a picture for a better explaining. If he copy/paste or he has to click and drag or anything i don't care, he HAS TO be able to put a picture into the textarea.
I wondered if another textbox that can do this would exist and what Type does the textbox has to be in PhpMyAdmin.
My textarea :
<textarea name="Escalade" class="longInput" cols="80%" rows="19" wrap="hard">
</textarea>
Without some kind of JavaScript WYSIWYG library this is not possible as vanilla textarea only takes text (clue is in the name).
I assume that you are viewing the submissions in phpMyAdmin which is an interface onto a MySQL database. It is good for developing stuff but not so great as an admin user interface long term. What you are asking about are called transformations.
Here are some tutorials on storing images in a database:
http://www.hockinson.com/programmer-web-designer-denver-co-usa.php?s=47
http://w3schools.invisionzone.com/index.php?showtopic=48068
How to store file name in database, with other info while uploading image to server using PHP?
Here are some lists of WYSIWYG editors:
http://www.sitepoint.com/html5-wysiwyg/
https://github.com/cheeaun/mooeditable/wiki/Javascript-WYSIWYG-editors
Those phpMyAdmin transformations:
http://docs.phpmyadmin.net/en/latest/transformations.html
That is about as much help as can be offered to you without seeing the PHP code behind the form at the very least. Hope this helps.
If someone is looking for an answer, I had asked my profesor and he answered that what I was looking for is a "Rich Text Editor". I'm using ckeditor with the plugin prgfilemanager. It allows me to insert pictures but I cannot copy/paste them which is pretty annoying...
You can try it here http://ckeditor.com/demo I hope it will help you if you have the same problem that I had :)
While it is true that you cannot use a textarea, the answer is very simple. You can use a content editable div, grab the contents as html and write it to a databae using AJAX and PHP.
Just name a div like this:
<div class="my_article" contenteditable></div>
and pass the contents on the click of a button into a JS variable and then pass that into PHP using AJAX.
var content1 = $('.my_article').html();
If anyone needs further help please comment and I'll be happy to obligue.

Conditional contact formula (in Wordpress)

I've Googled around for about an hour, without luck.
I'm trying to build an advanced contact formula i a Wordpress environment. The contact formula should do this:
At first, there should only be a single dropdown-menu available, like this:
Option1
Option2
Option3
If 'Option1' is selected, then some information should be shown, and then another dropdown-menu is shown, as such:
Option4
Option5
Option6
If 'Option2' is selected, then it should again show some information, but then show three other options, like this:
Option7
Option8
Option9
And so on. Many survey-formulars are built in this way - but I need to make it, to make a support-site for some different products.
I tried Googling for Wordpress-plugins, but without any luck (I must admit, I'm unsure of, what I should search for). I've used Wufoo-formula's before, but it doesn't appear to me, that Wufoo has that option.
How is this made the easiest and the best? Hand-coding it using HTML, javascript and CSS? Or are there a cool online-tool that I'm unaware of?
I had the same problem and made some research, which ended up in some results.
1. Buy the required functions
If you have a great number of forms to create and the money to invest, you could use something like Ninja Forms and buy the Conditional Logic plugin. With this you can create multiple forms and connect their elements with the needed criteria to show or hide them or to change their values.
https://ninjaforms.com/extensions/conditional-logic/
2. Code the form
Actually we have only one form we use. This is the reason, because I decided to save my money and did it myself.I expanded our wordpress theme by another page template and created the form that fits our needs in it. After that I added the PHP code to send the form via email on the top and the JavaScript code for the conditional logic on the bottom of my php file. In Wordpress I created a new page and applied the newly created page template.
I'm not sure if this is best practice, but for me it was an easy way to achieve my goal and save some time.
Best regards

Gmail iOS App uses custom html tags - any info?

So I was looking through the Gmail iOS App (2.0.1) and saw some included html files like calendar.html:
<h1>
<?cs #trans description Title for screen in welcome sequence describing the
ability to immediately act on calendar events. (Maximum characters: ~25) ?>
Instantly RSVP</h1>
<p>
<?cs #trans description
Reference to being able to receiving emails for calendar events and being able
to act on the events immediately.
(Maximum characters: ~100 depends on line breaks) ?>
Respond to Google Calendar invites right from the app.
</p>
I was wondering if anyone knew what the ?cs tags were for. I did try googling it but I couldn't find anything. Maybe its an internal google thing? Any info would be nice. I'm just trying to learn about iOS/Google programming style.
<? … ?> is an XML processing instruction. They are not document data, but are intended for the underlying XML engine.
Typically processing instructions are used by an XML engine as a way of embedding control flow (<? if test="condition" ?>) and commands (<? echo "string" ?>) into the XML document.
Here it looks like cs is a kind of meta command. cs #trans description appears to be a label for for some kind of user help.
I'm sorry it doesn't directly answer your question, but a better understanding of the form might help you learn more about the function.
My guess would be that those bits of text inside the <?cs> tag are used during development by an internal Google localization tool to explain the purpose of the following text to a translator. They are probably not displayed or used anywhere in the running application.