demonboy

OK, this isn’t quite working. Collecting the above, I have this code:

/** add image at end of blog post **/
function insert_image_into_posts($content) {
// Get the ID of the image you want to insert
$image_id = 54771; 

// Check if it’s a post and not a page
if (is_single() && get_post_type() === 'post') {
// Insert the image into the post content
$image_html = '<p>my content.</p><a href="">'.
wp_get_attachment_image($image_id, 'full'); .'</a>';
$content = $image_html .'
'. $content;
}
return $content;
}
add_filter('the_content', 'insert_image_into_posts');

WordPress is saying that the ‘.’ before ‘</a> is unexcepted. This one:

<code role="textbox" aria-multiline="true" aria-label="Code" contenteditable="true" class="block-editor-rich-text__editable rich-text" style="white-space: pre-wrap; min-width: 1px;">wp_get_attachment_image($image_id, 'full'); .'</a>';

If I remove it then of course all following text becomes a link. Where should this ‘.’ go?

Secondly, it is not inserting the image at the end of the post, it’s thrown it in randomly after the first paragraph.

Any pointers?

Hi Sohil, thank you for that, it’s much appreciated. Where would I add any html in this code? For example, if I wanted to link the image or include a paragraph of text before it? Something like this…

$image_html = <p>some text</p><a href=”mylink.com”><img src=wp_get_attachment_image($image_id, ‘full’)</a>;

Thanks for the reply, Nick. To be honest, I do most of my backend stuff on the desktop but I’m trying to spend less time on the computer so I’m doing more stuff on the mobile. I suspect I’m not the only one who does backend stuff on a small screen. I notice a number of plug-in dashboards are optimised for mobile. Just as a random example, Wordfence plays nicely on a mobile in the backend.

I appreciate the point about needed to charge for features. I’m not averse to paying for plugins but having to click three times to disable an option because of popups asking to pay is frustrating.

I will try again on the desktop.

OK, I have solved this after an hour or so of messing around. Unfortunately, you cannot override the CSS settings of the login page. Instead, you need to add some script to your theme’s functions file, and then create a new, specific stylesheet for the login page. I’m not the world’s best coder and the following could be tidied up, but this works. Here are the steps:

1. In your child theme folder, create an ‘images’ folder
2. Upload an icon to replace the standard WordPress icon
3. In your functions.php file, add the following. This swaps the WP icon for yours and makes it link to your homepage:
   

/** CHANGE WP LOGO AT LOGIN **/
function my_login_logo() { ?>
    <style type="text/css">
        #login h1 a, .login h1 a {
            background-image: url(<?php echo get_stylesheet_directory_uri(); ?>/images/jficon.png);
		height:120px;
		width:120px;
		background-size: 120px 120px;
		background-repeat: no-repeat;
        	padding-bottom: 30px;
        }
    </style>
<?php }
add_action( 'login_enqueue_scripts', 'my_login_logo' );

function my_login_logo_url() {
    return home_url();
}
add_filter( 'login_headerurl', 'my_login_logo_url' );

function my_login_logo_url_title() {
    return 'Your Website's Title';
}
add_filter( 'login_headertext', 'my_login_logo_url_title' );

4. Change the sizes/padding above to your image accordingly, and change where it says ‘Your Website’s Title’ to your own description or title

5. Now we want to override the default CSS for the login/registration/lost password page, so underneath the above code in your functions.php file, add:

//Replace style-login.css with the name of your custom CSS file
function my_custom_login_stylesheet() {
    wp_enqueue_style( 'custom-login', get_stylesheet_directory_uri() . '/style-login.css' );
}

//This loads the function above on the login page
add_action( 'login_enqueue_scripts', 'my_custom_login_stylesheet' );

6. Create a ‘style-login.css’ file and add it to the root of your child theme.

7. Add the following CSS to this file and upload:

body.login {background-color: #5c5c5c;}
body.login div#login h1 a, body.login div#login h1, body.login div#login p#nav {background-color: #fff;}
body.login div#login h1 {padding-top: 20px;}
body.login div#login h1 a {margin-bottom: 0;}
body.login div#login form#loginform {margin-top: 0; background-color: #fff; border:none;}
body.login div#login p#nav {margin-top: 0; padding-bottom:20px; font-size:0;}
body.login div#login p#nav a {font-size: 20px;}
body.login div#login p#backtoblog a {color: #fff;}
body.login .wp-login-lost-password::before{content: "\a"; white-space: pre;}
body.login .notice {margin-bottom: 0;}
body.login div#login form#registerform, body.login div#login form#lostpasswordform {margin-top:0; border:none;}
body.login div#login p#nav a.wp-login-log-in::after {content: "\a"; white-space: pre;}

What this does:

Changes the background colour of the login/registration/lost password page.

Keeps the main elements of these forms in a white background

Increases the ‘Registration’ and ‘Lost Password’ link sizes

Puts these two links on separate lines

Cunningly removes the pipe character between these two links by making the font size zero and then changing the link font size back to normal!

I’ve kept the ‘return to your website’ link at the bottom separate and changed the colour to white. You could make this div white, remove the padding and make it look part of the main form but I prefer it this way.

The language change option at the very bottom is irritating as this sits in its own 100% width div. There could be a way of making the background white and making it the same width as the rest of the form so everything sits on a white background, but I’d lost the will to live at this point.

Hope this helps someone looking to do something similar.

This is what it will look like.

Ignore. I have this up and running.

Thank you. Just knowing the semantics helps with my search! Appreciate the reply, cheers.

Hi Jacob, thanks again for this, it’s much appreciated. Unfortunately, I can’t give you access to the pages as it’s a private website.

I’ve always had a problem with Inspector, but that’s just user error so I’ll continue to play with it.

I have another question but it’s separate from this so I’ll start a new post. Thank you for your assistance.

That’s perfect, Jacob, thank you. Much appreciated. For anyone else looking to also style the widget upload button, the CSS for that is

.wppa-upload-widget .wppa-album-cover-link

Thank you, I will look at this tomorrow. Much appreciated.

Yeah, it’s just some simple CSS I guess. On the album cover there’s an ‘upload photo’ link, and also one in the widget for the sidebar. Just something like this image (ignore the icon) https://www.oyster-owners.com/wp-content/uploads/2024/02/button.gif

@joelsmashballoon hi Joel. Yes, I’ve got it working now, thank you. Appreciate the quick response, cheers.

OK, seems this is an error with Pro. I’ve just checked their forum and there is a known issue.

Aha, I’ve just read the other thread. Looks like the button disappears if they are connected, yes?

All sorted now, thanks. But now the button has disappeared. Please see my other post.

Hi @threadi, thanks for replying. Unfortunately this doesn’t work, with the feed coming back as garbled. The description of different articles are merged into one and various placeholders missing. You can just about make sense of the XML file but readers like Feedly can’t process it, while other aggregators just show a jumbled mess.